> For the complete documentation index, see [llms.txt](https://a11y.gitbook.io/graphics-aria/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-clippath.md).

# 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 %}