Signatur
Beschreibung
SVGFilterElement ist die DOM-Schnittstelle des SVG-Elements <filter>. Ein Filter fasst mehrere Filterprimitive wie <feGaussianBlur>, <feColorMatrix> oder <feOffset> zusammen. Über das Attribut bzw. die CSS-Eigenschaft filter: url(#id) wird er auf SVG-Formen oder sogar HTML-Elemente angewendet.
Die Schnittstelle erbt von SVGElement und enthält ausschließlich schreibgeschützte, animierbare Eigenschaften: x, y, width und height (jeweils SVGAnimatedLength) legen den Filterbereich fest, filterUnits und primitiveUnits (SVGAnimatedEnumeration) bestimmen das Koordinatensystem, und href (SVGAnimatedString, aus SVGURIReference) verweist auf einen anderen Filter, von dem geerbt wird. Die Objekte selbst lassen sich nicht ersetzen, ihre baseVal-Werte aber schon.
Man nutzt die Schnittstelle, wenn Filter dynamisch erzeugt oder angepasst werden sollen, etwa um den Filterbereich für große Schatten- oder Weichzeichnereffekte zu vergrößern, damit nichts abgeschnitten wird, oder um Filter zur Laufzeit für Diagramme und Visualisierungen zu bauen. Die Standardwerte lauten x="-10%", y="-10%", width="120%", height="120%", filterUnits="objectBoundingBox" und primitiveUnits="userSpaceOnUse".
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $x | SVGAnimatedLength | -10% | Schreibgeschützte Eigenschaft: x-Koordinate des Filterbereichs (Attribut x). |
| $y | SVGAnimatedLength | -10% | Schreibgeschützte Eigenschaft: y-Koordinate des Filterbereichs (Attribut y). |
| $width | SVGAnimatedLength | 120% | Schreibgeschützte Eigenschaft: Breite des Filterbereichs. |
| $height | SVGAnimatedLength | 120% | Schreibgeschützte Eigenschaft: Höhe des Filterbereichs. |
| $filterUnits | SVGAnimatedEnumeration | 2 (objectBoundingBox) | Koordinatensystem für x, y, width und height. Werte aus SVGUnitTypes: 1 = userSpaceOnUse, 2 = objectBoundingBox. |
| $primitiveUnits | SVGAnimatedEnumeration | 1 (userSpaceOnUse) | Koordinatensystem für Längenangaben innerhalb der Filterprimitive. |
| $href | SVGAnimatedString | Verweis (href bzw. xlink:href) auf einen anderen <filter>, dessen Attribute und Primitive geerbt werden. |
Beispiele
Weichzeichnungsfilter dynamisch erzeugen und anwenden
const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(SVG_NS, "svg");
svg.setAttribute("width", "200");
svg.setAttribute("height", "120");
const defs = document.createElementNS(SVG_NS, "defs");
const filter = document.createElementNS(SVG_NS, "filter");
filter.id = "weich";
const blur = document.createElementNS(SVG_NS, "feGaussianBlur");
blur.setAttribute("stdDeviation", "4");
filter.append(blur);
defs.append(filter);
const rect = document.createElementNS(SVG_NS, "rect");
rect.setAttribute("x", "40");
rect.setAttribute("y", "30");
rect.setAttribute("width", "120");
rect.setAttribute("height", "60");
rect.setAttribute("fill", "teal");
rect.setAttribute("filter", "url(#weich)");
svg.append(defs, rect);
document.body.append(svg);
console.log(filter instanceof SVGFilterElement);Filterbereich und Einheiten auslesen
const filter = document.querySelector("filter#weich");
const unitNames = {
[SVGUnitTypes.SVG_UNIT_TYPE_USERSPACEONUSE]: "userSpaceOnUse",
[SVGUnitTypes.SVG_UNIT_TYPE_OBJECTBOUNDINGBOX]: "objectBoundingBox"
};
console.log(unitNames[filter.filterUnits.baseVal]);
console.log(unitNames[filter.primitiveUnits.baseVal]);
console.log(filter.width.baseVal.valueAsString);Filterbereich für großen Schatten vergrößern
const filter = document.querySelector("filter#weich");
const { SVG_LENGTHTYPE_PERCENTAGE } = SVGLength;
// Bereich großzügig erweitern, damit der Effekt nicht abgeschnitten wird
filter.x.baseVal.newValueSpecifiedUnits(SVG_LENGTHTYPE_PERCENTAGE, -50);
filter.y.baseVal.newValueSpecifiedUnits(SVG_LENGTHTYPE_PERCENTAGE, -50);
filter.width.baseVal.valueAsString = "200%";
filter.height.baseVal.valueAsString = "200%";
console.log(filter.getAttribute("x"), filter.getAttribute("width"));Koordinatensystem auf Benutzerraum umstellen
const filter = document.querySelector("filter#weich");
// filterUnits.baseVal ist beschreibbar (Zahl aus SVGUnitTypes)
filter.filterUnits.baseVal = SVGUnitTypes.SVG_UNIT_TYPE_USERSPACEONUSE;
filter.x.baseVal.valueAsString = "0";
filter.y.baseVal.valueAsString = "0";
filter.width.baseVal.valueAsString = "200";
filter.height.baseVal.valueAsString = "120";
console.log(filter.getAttribute("filterUnits"));