ClipPath support

The library support the clip-path attribute 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