clipPath

The clipPath SVG element defines a clipping path, to be used by the clip-path property. A clipping path restricts the region to which paint can be applied.

Usually, this element is created with:

const clipPath = parentElement.add('clipPath')

It's possible to create it as a disconnected element with gySVG('clipPath') and attach it to the SVG document with .attachTo().

More info: mdn (opens new window) | w3c (opens new window)

.clipPathUnits()

clipPath.clipPathUnits( unit )

Set the coordinate system for the contents of the clipPath element.

• argument: {string} unit Must be 'userSpaceOnUse' | 'objectBoundingBox'

• returns: {gySVGObject} The original object

const clipPathUnits = element.clipPathUnits();

Get the clipPathUnits current value.

• returns: {string} Current unit

• Parent elements: a | defs | g | marker | mask | pattern | svg | symbol.

• Child elements: animate | animateMotion | animateTransform | circle | desc | discard | ellipse | line | metadata | mpath | path | polygon | polyline | rect | set | text | title | use.