SVG 튜토리얼

SVG 元素

SVG <clipPath> 요소

SVG <clipPath>元素用于根据特定路径剪切SVG形状。也称为SVG裁剪。路径内部的形状部分是可见的，而外部的部分则是不可见的。

在线示例

以下示例使用clipPath绘制一个蓝色扇形。

예제

<svg height="450" width="450">
　　<defs>
　　　　　　<clipPath id="clip">
　　　　　　　　　　<rect x="15" y="15" width="40" height="40"　/>
　　　　　　</clipPath>
　　</defs>
　　<circle　cx="25" cy="25"　r="30"
　　　　　　　　　　style="fill: #0000ff; clip-path: url(#clip); "　/>
</svg>

测试看看‹/›

运行效果如下:

用法解释

이제, 클립 패스 내의 원형 부분이 보이는 나머지 부분이 잘려 나갔음을 볼 수 있습니다。
<clipPath>元素的id属性定义剪辑路径的唯一名称。

更多在线示例

아래 예제는 clipPath를 사용하여 사랑의 심장 모양을 그립니다:

예제

<style>
svg{width:40%;height:30%}
@keyframes openYourHeart {from {r: 0} to {r:　60px}}
#myClip circle {
　　animation: openYourHeart　15s infinite;
}
</style>
<svg viewBox="0 0　100　100">
　　<clipPath id="myClip">
　　　　<!--
　　　　　　원형 밖의 모든 것이 잘려 나가기 때문에, 보이지 않습니다.
　　　　-->
　　　　<circle　cx="40"　cy="35"　r="35></circle>
　　</clipPath>
　
　　<!--　참조 요소로서의 검은 심장 모양(영문 원문: for reference)　-->
　　<path　id="heart"　d="M10,30　A20,20,0,0,1,50,30　A20,20,0,0,1,90,30　Q90,60,50,90　Q10,60,10,30　Z"></path>
　
　　<!--
　　　　검은 심장 모양 내에만 빨간 원 부분이 보입니다;
　　　　원이 커지면서 점점 빨간 심장 모양으로 변합니다.
　　-->
　　<use　clip-path="url(#myClip)"　xlink:href="#heart"　fill="red"></use>
</svg>

테스트해 보세요 ‹/›

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

SVG <mask> 요소 svg <pattern> 요소