<svg viewBox="0 0 100 100">
<clipPath id="myClip">
<circle cx="40" cy="35" r="35" />
</clipPath>
<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" />
<use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>
@keyframes openYourHeart {
from {
r: 0;
}
to {
r: 60px;
}
}
#myClip circle {
animation: openYourHeart 15s infinite;
}
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 clip-path
property, or a child of the referencing element) must remain the same as if it were not clipped.
By default, 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.