clipPath support

The library support the clip-path and mask attributes for all elements^[1]

See Clipping, Masking and Compositing

.

The following attributes are supported at the clipPath declaration level:

• id: the id of the clipping path
• transform: the optional transform to apply to the clipping path
• clipPathUnits: the optional units for the specification of the clipping path

Supported shapes

All basic shapes are supported to construct the clips:

• rect
• circle
• ellipse
• polyline
• polygon
• path
• text

Example

   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
         <clipPath id="cut-off-bottom">
            <rect x="0" y="0" width="200" height="100" />
         </clipPath>
      </defs>
      <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
   </svg>

Will have the following result:

Limitations

• The clipPathUnits attribute is not supported
• The clip-rule attribute is supported only for the path element