SVG <clipPath> Element

The <clipPath> SVG element is used to define a clipping path that is to be used by the clip-path property. It works the same as clip-path in CSS. The clipPath element is used to put some restriction on a region such that anything drawn outside that region will neither be visible nor be drawn.

Syntax

<clipPath> ... </clipPath>

Attributes

• clipPathUnits: This attribute defines the coordinate system for the <clipPath> element's content.

Below given are a few examples of the function given above.

Example 1:

Output:

Example 2:

Output:

Browsers Supported: The following browsers are supported by this SVG element:

• Chrome 1
• Edge 12
• Firefox 1.5
• Opera 9
• Safari 3