SVG 튜토리얼

SVG 요소

SVG <clippath> 캔버스 경로

SVG剪切路径（도움말로 SVG剪切이라고도 불립니다）는 특정 경로에 따라 SVG 형태를 잘라내는 데 사용됩니다. 경로 내부의 형태 부분은 보이지만, 외부의 부분은 보이지 않습니다.

클립 패스 예제

이는 간단한 클립 패스 예제입니다：

예제

<svg　width="200"　height="100"　style="border:　1px　solid　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath">
　　　　　　　　　　　　<rect　x="15"　y="15"　width="40"　height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle　cx="25"　cy="25"　r="20"　style="fill:　#0000ff;　clip-path:　url(#clipPath);　"></circle>
</svg>
<svg　width="200"　height="100"　style="border:　1px　solid　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath2">
　　　　　　　　　　　　<rect　x="15"　y="15"　width="40"　height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle　cx="25"　cy="25"　r="20"　style="fill:　#0000ff;　clip-path:　url(#clipPath2);　"></circle>
　　　　<rect　x="15"　y="15"　width="40"　height="40"　style="stroke:　#000000;　fill:none;"></rect>
</svg>

테스트를 보세요‹/›

이 예제는 클립 패스가 비슷한 사각형(<clipPath> 요소 내의 모양)을 정의한 클립 패스를 정의합니다. 예제의 마지막에 정의된 원은 CSS 속성 clip-path는 <clipPath> id 속성을 참조합니다.

왼쪽 아래는 생성된 이미지입니다. 오른쪽은 동일한 이미지이지만, 클립 패스도 그려져 있습니다.

剪切 패스 내에서는 원의 일부만이 보이며, 나머지는 잘려납니다.

고급 클립 패스

다각형 이외의 다른 모양을 클립 패스로 사용할 수 있습니다. 원형, 타원형, 다각형 또는 사용자 정의 경로를 사용할 수 있습니다. 어떤 SVG 모양도 클립 패스로 사용할 수 있습니다.

이는 <path> 요소를 클립 패스로 사용하는 예제입니다.因为这些는 사용할 수 있는 가장 고급의 클립 패스 유형입니다. 클립 패스는 <rect> 요소에 적용됩니다.

예제

<svg　width="200"　height="100"　style="border:　1px　solid　#cccccc;">
　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;　"></rect>
</svg>
<svg　width="200"　height="100"　style="border:　1px　solid　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath3">
　　　　　　　　　　　　<path　d="M10,10　q60,60　100,0　q50,50　50,50　l40,0　l-40,40　l-100,-20"></path>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;　clip-path:　url(#clipPath3);"></rect>
</svg>

테스트를 보세요‹/›

생성된 이미지입니다-오른쪽에 있습니다. 왼쪽은 클립 패스가 없는 이미지를 표시합니다.

그룹 클립 패스

SVG 모양의 그룹에 클립 패스를 사용할 수 있습니다. 각 모양에 별도로 클립 패스를 사용하는 대신, 모양을 <g> 요소 안에 두고 <g> 요소에 CSS 속성 clip을 설정하면 됩니다。-path를 사용하여 만들면 됩니다. 이는 예제입니다：

예제

<svg　width="200"　height="100"　style="border:　1px　solid　#cccccc;">
　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;　"></rect>
　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
</svg>
<svg　width="200"　height="100"　style="border:　1px　solid　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath4">
　　　　　　　　　　　　<rect　x="10"　y="20"　width="100"　height="20"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g　style="clip-path:　url(#clipPath4);">
　　　　　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;"></rect>
　　　　　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
　　　　</g>
</svg>

테스트를 보세요‹/›

아래는 클립 패스가 없는 이미지입니다. 그리고 클립 패스가 적용된 이미지가 다음에 있습니다：

텍스트 클립 패스

텍스트를 클립 패스로 사용할 수도 있습니다. 이는 예제입니다：

예제

<svg　width="200"　height="100"　style="border:　1px　solid　#cccccc;">
　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;　"></rect>
　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
</svg>
<svg　width="200"　height="100"　style="border:　1px　solid　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath5">
　　　　　　　　　　　　<text　x="10"　y="20"　style="font-size:　20px;　">
　　　　　　　　　　　　　　　　이는 텍스트입니다
　　　　　　　　　　　　</text>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g　style="clip-path:　url(#clipPath5);">
　　　　　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;"></rect>
　　　　　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
　　　　</g>
</svg>

테스트를 보세요‹/›

이는 잘라내기 경로가 있고 없는 결과 이미지입니다:

지금 보고 있는 것처럼, 텍스트 내부의 형상의 일부만 표시됩니다.

SVG <filter> 필터 SVG 참조 매뉴얼