SVG <clipPath>元素用于根據(jù)特定路徑剪切SVG形狀。也稱為SVG裁剪。路徑內(nèi)部的形狀部分是可見的，而外部的部分則是不可見的。
以下示例使用clipPath繪制一個藍(lán)色扇形。
<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>測試看看?/?
運行效果如下:
現(xiàn)在，您可以看到剪切路徑內(nèi)的圓形部分可見的其余部分已被剪切。
<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>
<!--
只有位于黑色心形內(nèi)的那一部分紅色圓形是可見的；
隨著圓變大，它將逐漸變?yōu)橐粋€紅色心形。
-->
<use clip-path="url(#myClip)" xlink:href="#heart" fill="red"></use>
</svg>測試看看 ?/?運行后效果如下: