May 2019
Beginner to intermediate
650 pages
14h 50m
English
A clipping mask is created with any shape declared inside the <clipPath> element. This is usually done in <defs>, setting an id for the clipping mask that can be referenced in the object that should be clipped, using url(#id) inside a clip-path attribute, as shown below:
<svg width="425" height="425"> <defs> <clipPath id="poly"> <circle r="139" cx="200" cy="199"/> </clipPath> </defs> <!-- Clipped image --> <image x="25" y="25" height="350" width="350" xlink:href="../Data/Images/pluto.jpg" clip-path="url(#poly)"/></svg>
The following SVG screenshots show the circular clipping mask above applied to an image. The SVG at left shows the original image and the clipped image is shown at right.
Read now
Unlock full access