# SVG 클립 패스

### 클립패스

클리핑 처리할 요소 `clip-path` 속성에 `<clipPath>` 요소 ID를 참조하면 클리핑 처리 됩니다. `<clipPath>` 요소 내부에는 자를 모양의 도형 요소를 삽입합니다. 사용법은 아래와 같습니다.

```markup
<svg width="512" height="702" viewBox="0 0 512 702">

  <!-- 클립패스 요소 -->
  <clipPath id="clippath">
	  <circle cx="150" cy="150" r="150" />  
  </clipPath>
  
  <!-- 클립 패스 처리된 텍스트 -->
  <text clip-path="url(#clippath)" font-size="100" font-family="Arial" font-weight="bold" x="0" y="250">
    AOA 2018
  </text>
  
  <!-- 가이드 텍스트 -->
  <text opacity="0.1" font-size="100" font-family="Arial" font-weight="bold" x="0" y="250">
    AOA 2018
  </text>
  
</svg>
```

![클립패스 처리된 SVG 텍스트](/files/-LESjJi_FwAU6RwvKskE)

{% hint style="info" %}
**클립패스(clipPath)와 마스크(mask)의 차이점**

클리핑은 다른 파트에서 정의한 요소의 일부를 제거하는 것을 말합니다. 이 경우 모든 반투명 효과는 가능하지 않습니다. 반면에 마스킹은 마스크의 투명도 및 회색 값을 고려하여 부드러운 가장자리를 허용합니다.
{% endhint %}

### CSS 클립 패스

SVG 대신 CSS 클립 패스를 활용할 수도 있습니다. 하지만 안타깝게도 IE, Edge는 현재 지원하지 않습니다. \
(참고 [caniuse - CSS clip-path](https://caniuse.com/#search=clip-path))

```css
.clip-path {
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
```

![](/files/-LETQN6v9AvtcX3kY69z)

{% embed url="<https://bennettfeely.com/clippy/>" %}
CSS clip-path 온라인 도구
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-clippath.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.