SVG 튜토리얼

SVG 요소

SVG 마스크(Mask)

SVG 마스크 기능은 마스크를 SVG 형상에 적용할 수 있습니다. 마스크는 SVG 형상의 어떤 부분이 보이는지 및 투명도를 결정합니다. SVG 마스크는剪切 경로의 더 고급 버전으로 볼 수 있습니다.

마스크 예제

이는 간단한 마스크 예제입니다:

예제

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

테스트해 보세요‹/›

이 예제에서는 ID=mask1마스크 정의. <mask> 요소 내부는 <rect> 요소입니다. 바로 이 <rect> 요소가 마스크의 형상을 정의합니다.

이 예제는 마스크를 사용하는 <rect> 요소를 정의합니다. 　<rect> 요소는 CSS style 속성을 사용하여 마스크 내부에 마스크 ID 속성을 참조합니다.

运行后图像效果：

이를 보여주려면 사각형의 높이는100픽셀, 하지만 직립된 전50픽셀만 보입니다. 이는 마스크 사각형이 단지50픽셀 높이입니다. 사각형은 마스크 사각형이 덮는 부분에서만 보입니다.

마스크가 없는 검은색 경계 사각형은 마스크 사각형의 크기입니다.

기타 형상의 마스크

모든 SVG 형상을 마스크로 사용할 수 있습니다. 원형을 마스크로 사용하는 예제가 다음과 같습니다:

예제

<svg>
　　<defs>
　　　　<mask　id="mask2"　x="0"　y="0"　width="100"　height="100"　>
　　　　　　<circle　cx="25"　cy="25"　r="25"　style="stroke:none;　fill:　#ffffff"/>
　　　　</mask>
　　</defs>
　　<rect x="1" y="1" width="100"　height="100"
　　　　style="stroke: none; fill: #0000ff; mask: url(#mask2)"/>
</svg>

테스트해 보세요‹/›

运行后图像效果：

다시 강조하지만, 보이는 마스크 원형의 곳에만 참조하는 마스크 사각형이 보입니다.

마스크 형상 색상 정의 마스크 불투명도

현재까지 마스크 형상(원형이나 사각형)의 채우기 색상은 #ffffff으로 설정되어 있습니다. 마스크 형상의 색상은 마스크 형상의 불투명도로 정의됩니다. 마스크 형상의 색상이 #ffffff(흰색)에 가까울수록 마스크를 사용하는 형상은 불투명하게 보이며, 마스크 형상의 색상이 #000000(검은색)에 가까울수록 마스크를 사용하는 형상은 투명하게 보입니다.

이는 마스크가 두 가지 다른 색상(#ffffff과66666로 구성된 사각형입니다. 마스크는 단일 사각형에 사용되므로 마스크 내의 두 개의 다른 형상이 같은 형상에 미치는 영향을 볼 수 있습니다.

예제

<svg　width="500" height="120">
<defs>
　　<mask　id="mask3"　x="0"　y="0"　width="100"　height="100"　>
　　　　<rect　x="0"　y="0"　　width="100"　height="50"
　　　　　　　　　　style="stroke:none;　fill:　#ffffff"/>
　　　　<rect　x="0"　y="50"　width="100"　height="50"
　　　　　　　　　　style="stroke:none;　fill:　#666666"/>
　　</mask>
</defs>
<text x="10" y="55" style="stroke: none; fill: #000000;">
　　　　이 텍스트는 사각형 아래에 있습니다
</text>
<rect x="1" y="1" width="100"　height="100"
　　　　style="stroke: none; fill: #0000ff; mask: url(#mask3)"/>
　　</svg>

테스트해 보세요‹/›

该示例还包含一个位于矩形下方的文本，该文本仅可通过该矩形的半透明蒙版部分看到。

运行后图像效果：

在蒙版中使用渐变

如果对用作蒙版的形状应用渐变，则可以实现蒙版所应用的形状的渐变透明度。

这是一个定义渐变的示例，使用渐变的蒙版，使用蒙版的矩形以及该矩形下的文本，因此您可以看到其透明度如何随着蒙版的渐变而变化：

예제

<svg　width="500" height="120">
<defs>
　　　　<linearGradient　id="gradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%"　　　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="100%"　y2="0%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　　　<stop　offset="0%"　　　stop-color="#ffffff"　stop-opacity="1"/>
　　　　　　　　<stop　offset="100%"　stop-color="#000000"　stop-opacity="1"/>
　　　　</linearGradient>
　　　　<mask　id="mask4"　x="0"　y="0"　width="200" height="100"　>
　　　　　　　　<rect　x="0"　y="0"　　width="200" height="100"
　　　　　　　　　　　　style="stroke:none;　fill:　url(#gradient1)"/>
　　　　</mask>
</defs>
<text x="10" y="55" style="stroke: none; fill: #000000;">
　　　　이 텍스트는 사각형 아래에 있습니다
</text>
<rect x="1" y="1" width="200" height="100"
　　　　style="stroke: none; fill: #0000ff; mask: url(#mask4)"/>
　　</svg>

테스트해 보세요‹/›

运行后图像效果：

渐变蒙版可以与其他效果（例如填充图案）结合使用。这是一个示例，其中可见矩形使用填充图案作为填充，并在其蒙版中使用渐变：

예제

<svg　width="500" height="120">
<defs>
　　<linearGradient　id="gradient2"
　　　　　　　　　　　　　　　　x1="0%"　　　y1="0%"
　　　　　　　　　　　　　　　　x2="100%"　y2="0%"
　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　<stop　offset="0%"　　　stop-color="#ffffff"　stop-opacity="1"/>
　　　　<stop　offset="100%"　stop-color="#000000"　stop-opacity="1"/>
　　</linearGradient>
　　<pattern　id="pattern2"
　　　　　　　　　x="10" y="10" width="20"　height="20"
　　　　　　　　　patternUnits="userSpaceOnUse"　>
　　　　<circle　cx="10"　cy="10"　r="10"　style="stroke:　none;　fill:　#0000ff;　"　/>
　　</pattern>
　　<mask　id="mask6"　x="0"　y="0"　width="200" height="100"　>
　　　　　　<rect　x="0"　y="0"　　width="200" height="100"
　　　　　　　　　　style="stroke:none;　fill:　url(#gradient2)"/>
　　</mask>
</defs>
<text x="10" y="55" style="stroke: none; fill: #000000;">
　　　　이 텍스트는 사각형 아래에 있습니다
</text>
<rect x="1" y="1" width="200" height="100"
　　　　　　style="stroke:　none;　fill:　url(#pattern2);　mask:　url(#mask6)"/>
　　</svg>

테스트해 보세요‹/›

주의해야 할 것은, 표시되는 사각형이 CSS 속성의 fill 채우기 패턴을 어떻게 참조하고, mask蒙版 속성을 어떻게 참조하는지입니다.

실행된 후 이미지 효과.

蒙版에서 채우기 패턴 사용

蒙版에서 채우기 패턴을 사용하여蒙版이 채우기 패턴의 형태가 되도록 할 수 있습니다. 이는 다음과 같은 예입니다:

예제

<svg　width="500" height="120">
<defs>
　　<pattern　id="pattern1"
　　　　　　　　　x="10" y="10" width="20"　height="20"
　　　　　　　　　patternUnits="userSpaceOnUse"　>
　　　　　　<circle　cx="10"　cy="10"　r="10"　style="stroke:　none;　fill:　#999999"　/>
　　</pattern>
　　<mask　id="mask5"　x="0"　y="0"　width="200" height="100"　>
　　　　<rect　x="0"　y="0"　　width="200" height="100"
　　　　　　　　style="stroke:none; fill: url(#pattern}}1)"/>
　　</mask>
</defs>
<text x="10" y="55" style="stroke: none; fill: #000000;">
　　　　이 텍스트는 사각형 아래에 있습니다
</text>
<rect x="1" y="1" width="200" height="100"
　　　　style="stroke: none; fill: #0000ff; mask: url(#mask5)"/>
　　</svg>

테스트해 보세요‹/›

실행 후 이미지 효과를 확인하세요. 주의하세요, 사각형은 반투명이며, 다른 위치에서는 완전 투명하게 도식화된 패턴이 그려져 있습니다.

SVG <filter> 필터 SVG <clippath> 자르기 경로