SVG 클립 패스

클립패스

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

<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 텍스트

클립패스(clipPath)와 마스크(mask)의 차이점

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

CSS 클립 패스

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

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

Clippy — CSS clip-path makerbennettfeely.com

CSS clip-path 온라인 도구