clipPath

클립패스

 

• 클리핑 처리할 요소 clip-path 속성에 <clipPath> 요소 ID를 참조하면 클리핑 처리 된다.
• <clipPath>
  - 클리핑 마스크 클립 영역 패스를 정의한다.

<svg width="500" height="400">
    <clipPath id="circle_path">
        <circle cx="150" cy="150" r="150"></circle>
    </clipPath>
    <text clip-path="url(#circle_path)" x="20" y="90" style="font-size:120;font-weight:900">svg lesson</text>
    <text x="20" y="90" style="font-size:120;font-weight:900;fill-opacity:0.3;">svg lesson</text>            
</svg>

• css 속성 활용

<svg width="500" height="400">
    <text class="text_clip" x="30" y="120" style="font-size:100;font-weight:900;">
        AOA 2022
    </text>
    <style>
        .text_clip{
            clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        }
    </style>
</svg>