# 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 gySVG('filter')
and attach it to the SVG document with .attachTo()
.
More info: mdn (opens new window) | w3c (opens new window)
# .x()
filter.x( x )
Set the x
attribute defines a x
-ax
is coordinate in the user coordinate system.
argument:
{number|string} x
The x value (length or percentage)returns:
{gySVGObject}
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 sy
stem.
argument:
{number|string} y
The y value (length or percentage)`returns:
{gySVGObject}
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:
{gySVGObject}
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:
{gySVGObject}
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 beuserSpaceOnUse
|objectBoundingBox
returns:
{gySVGObject}
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 beuserSpaceOnUse
|objectBoundingBox
returns:
{gySVGObject}
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.