SVG 가이드

SVG 요소

SVG <Animation> 애니메이션 요소 SVG <clipPath> 요소

SVG <mask> 요소

SVG 마스크 마스크 기능을 사용하여 마스크를 SVG 형상에 적용할 수 있습니다. SVG 마스크는剪切 경로의 더 고급 버전으로, SVG 형상의 어떤 부분이 보이며 투명도가 어떻게 되는지 결정합니다.

SVG에서는 투명한 마스크 레이어와 현재 객체를 결합하여 배경을 형성할 수 있습니다. 투명한 마스크 레이어는 다른 그래픽 객체나 <g> 요소일 수 있습니다. mask 요소는 이러한 마스크 요소를 정의합니다. 속성 mask는 마스크 요소를 참조합니다.

온라인 예제

파란색 사각형 마스크 생성

예제

<svg height="450" width="450">
　<defs>
　　<mask id="mask1" x="0" y="0" width="100" height="100"
　　　　<rect x="0" y="0" width="100" height="100"
　　　　　　　　style="stroke:none; fill: #ffffff"/>
　　</mask>
</defs>
<rect x="1" y="1" width="200" height="200"
　　　　style="stroke: none; fill: #0000ff; mask: url(#mask1)"/>
</svg>

시험해보세요‹/›

실행된 결과는 다음과 같습니다:

용법 설명

<mask> 요소의 id 속성은 마스크의 독특한 이름을 정의합니다.
<mask>의 <rect> 요소는 마스크의 형태를 정의합니다.
<rect> 요소의 style 속성은 mask ID 요소에 mask CSS 속성을 부여합니다.

更多 온라인 예제

텍스트 마스크링 효과

예제

<svg width="200" height="80"　
　　　　　viewBox="0 0　200　80" version="1.1"
　　　　　xmlns="http://www.w3.org/2000/svg"　
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<defs>
　　　　　　　　<mask id="myMask" maskUnits="userSpaceOnUse"
　　　　　　　　　　　　　　x="0" y="0" width="200" height="80">
　　　　　　　　　　　　<rect x="0" y="0" width="100" height="80" fill="white"/>
　　　　　　　　</mask>
　　　　　　　　<text id="Text" x="100" y="48"　
　　　　　　　　　　　　　　font-size="26" font-weight="bold" text-anchor="middle">
　　　　　　　　　　　　Black & White
　　　　　　　　</text>
　　　　</defs>
　　　　<!--　배경에 검은색 사각형을 그립니다　-->
　　　　<rect x="100" y="10" width="95" height="60"></rect>
　　
　　　　<!--　텍스트 문자열을 두 번 그립니다. 먼저, 마스크 없는 흰색 텍스트. 그리고 마스크를 적용한 검은색 텍스트-->
　　　　<use xlink:href="#Text" fill="white"/></use>
　　　　<use xlink:href="#Text" fill="black" mask="url(#myMask)"/></use>
</svg>

테스트를 해보세요 ‹/›

실행된 결과는 다음과 같습니다:

SVG <Animation> 애니메이션 요소 SVG <clipPath> 요소