Clipped

Drag the various elements to see how things work.

Clipping an SVG image

• The <image> is clipped with a <clipPath> (both are SVG elements).
• Render the <clipPath> itself with SVG <use>.
• <clipPath> references its clipping path with the clip-path SVG attribute.

Gotchas

• clip-path can be an SVG attribute or a CSS property.
• All modern browsers support <clipPath> and the SVG clip-path attribute.
• The clip-path CSS property is an experimental technology (as of Dec 2016, anyway).
• IE does not support CSS clip-path.