filter

The filter SVG element defines a custom filter effect by grouping atomic filter primitives. It is never rendered itself, but must be used by the filter attribute on SVG elements, or the filter CSS property for SVG/HTML elements.

This element implements the SVGFilterElement interface.

Usually, this element is created with:

const filter = parentElement.add('filter')

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

More info: mdn | w3c

.x()

filter.x( x )

Set the x attribute defines a x-axis coordinate in the user coordinate system.

• argument: {number|string} x The x value (length or percentage)

• returns: {gSVGObject} The original object

const x = element.x();

Get the x current value.

• returns: {number|string}

.y()

filter.y( y )

Set the y attribute defines a y-axis coordinate in the user coordinate system.

• argument: {number|string} y The y value (length or percentage)`

• returns: {gSVGObject} The original object

const y = element.y();

Get the y current value.

• returns: {number|string}

.width()

filter.width( width )

Set the width attribute defines the horizontal length of an element in the user coordinate system.

• argument: {number|string} width The width value (length or percentage)

• returns: {gSVGObject} The original object

const width = element.width();

Get the width current value.

• returns: {number|string}

.height()

filter.height( height )

Set the height attribute defines the vertical length of an element in the user coordinate system.

• argument: {number|string} height The height value (length or percentage)

• returns: {gSVGObject} The original object

const height = element.height();

Get the height current value.

• returns: {number|string}

.filterUnits()

filter.filterUnits( model )

Set the filterUnits attribute defines the coordinate system for the attributes x, y, width and height.

• argument: {string} model Must be userSpaceOnUse | objectBoundingBox

• returns: {gSVGObject} The original object

const filterUnits = element.filterUnits();

Get the filterUnits current value.

• returns: {string}

.primitiveUnits()

filter.primitiveUnits( mode )

Set the primitiveUnits attribute specifies the coordinate system for the various length values within the filter primitives and for the attributes that define the filter primitive subregion.

• argument: {string} mode Must be userSpaceOnUse | objectBoundingBox

• returns: {gSVGObject} The original object

const primitiveUnits = element.primitiveUnits();

Get the primitiveUnits current value.

• returns: {string}

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

• Child elements: animate | desc | feBlend | feColorMatrix | feComponentTransfer | feComposite | feConvolveMatrix | feDiffuseLighting | feDisplacementMap | feDropShadow | feFlood | feFuncA | feFuncB | feFuncG | feFuncR | feGaussianBlur | feImage | feMerge | feMergeNode | feMorphology | feOffset | feSpecularLighting | feTile | feTurbulence | metadata | set | title.