마스크

이미지 마스크

 

• <defs> 내부에 <mask> 요소를 선언하고, 식별 가능한 id 속성을 부여한다.
• <image> 요소 mask 속성 값으로 url() 함수를 사용해 마스크 ID를 설정하면 마스킹된 이미지가 화면에 렌더링 된다.
• 주의할 점은 마스크는 Alpha Channel을 사용하므로 하얀색(#fff)일 경우 Opacity 100%와 같고, 검은색(#000) 일 경우 Opacity 0%와 같다.

<svg width="300" height="300">
    <defs>
        <mask id="fruit_mask">
            <polygon points="146,21 239,58 203,149 106,147 65,65 146,21" fill="pink"></polygon>
        </mask>
    </defs>
    <image mask="url(#fruit_mask)" xlink:href="images_f/fruits01.jpg" x="0" y="0" height="300" aria-label="fruits01"></image>
</svg>

• mask-text

<svg width="300" height="300">
    <defs>
        <mask id="mask_img">
            <image xlink:href="images_f/fruits01.jpg" x="0" y="0" width="500"></image>
        </mask>
    </defs>
    <text mask="url(#mask_img)" x="0" y="90" style="font-size:9rem;font-weight:900;">SVG LESSON</text>
</svg>

• 마스크(mask)와 클립패스(clipPath)의 차이점
  - 마스킹은 마스크의 투명도 및 회색 값을 고려하여 부드러운 가장자리를 허용한다.
  - 클리핑은 다른 파트에서 정의한 요소의 일부를 제거하는 것을 의미한다.
    (이 경우 모든 반투명 효과는 불가능)