SVG Tutorial

SVG Element

SVG <mask> Element SVG <pattern> Element

SVG <clipPath> Element

The SVG <clipPath> element is used to clip SVG shapes according to a specific path. Also known as SVG clipping. The shape part inside the path is visible, and the part outside is not visible.

Online Examples

The following example uses clipPath to draw a blue sector.

Example

<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>

Test and see‹/›

The running effect is as follows:

Usage Explanation

Now, you can see that the rest of the circular part inside the clipping path is visible, and the rest is clipped.
<clipPath> element's id attribute defines the unique name of the clipping path.

More online examples

The following example uses clipPath to draw a heart shape:

Example

<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">
　　　　<!--
　　　　　　All items outside the circle will be clipped and therefore invisible.
　　　　-->
　　　　<circle　cx="40"　cy="35"　r="35></circle>
　　</clipPath>
　
　　<!--　The black heart shape as a reference element (English original: 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>
　
　　<!--
　　　　Only the part of the red circle inside the black heart shape is visible;
　　　　As the circle grows larger, it will gradually become a red heart shape.
　　-->
　　<use　clip-path="url(#myClip)"　xlink:href="#heart"　fill="red"></use>
</svg>

Test and see ‹/›

The effect after running is as follows:

SVG <mask> Element SVG <pattern> Element