files/en-us/web/svg/reference/element/clippath/index.md
The <clipPath> SVG element defines a clipping path, to be used by the {{SVGAttr("clip-path")}} property.
A clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn.
{{svginfo}}
<clipPath> element.
Value type: userSpaceOnUse | objectBoundingBox; Default value: userSpaceOnUse; Animatable: yesThis element implements the {{domxref("SVGClipPathElement")}} interface.
html,
body,
svg {
height: 100%;
}
<svg viewBox="0 0 100 100">
<clipPath id="myClip">
<!--
Everything outside the circle will be
clipped and therefore invisible.
-->
<circle cx="40" cy="35" r="35" />
</clipPath>
<!-- The original black heart, 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" />
<!--
Only the portion of the red heart
inside the clip circle is visible.
-->
<use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>
/* With a touch of CSS for browsers who *
* implemented the r Geometry Property. */
@keyframes openYourHeart {
from {
r: 0;
}
to {
r: 60px;
}
}
#myClip circle {
animation: openYourHeart 15s infinite;
}
{{EmbedLiveSample('Example', 100, 100)}}
A clipping path is conceptually equivalent to a custom viewport for the referencing element. Thus, it affects the rendering of an element, but not the element's inherent geometry. The bounding box of a clipped element (meaning, an element which references a <clipPath> element via a {{SVGAttr("clip-path")}} property, or a child of the referencing element) must remain the same as if it were not clipped.
By default, {{cssxref("pointer-events")}} are not dispatched on clipped regions. For example, a circle with a radius of 10 which is clipped to a circle with a radius of 5 will not receive "click" events outside the smaller radius.
{{Specifications}}
{{Compat}}