Signatur
Beschreibung
Die Schnittstelle SVGClipPathElement steht für ein <clipPath>-Element. Ein Clipping-Pfad legt einen Bereich fest, außerhalb dessen ein Element nicht gezeichnet wird. Das ist die „harte“ Variante einer Maske: Jeder Punkt ist entweder sichtbar oder unsichtbar. Angewendet wird der Pfad über das Attribut bzw. die CSS-Eigenschaft clip-path="url(#id)", und zwar auf SVG-Elemente wie auch auf normale HTML-Elemente.
Die Schnittstelle erbt von SVGElement und bringt zwei eigene, schreibgeschützte Eigenschaften mit:
clipPathUnits(SVGAnimatedEnumeration): Legt fest, auf welches Koordinatensystem sich der Inhalt bezieht.SVGUnitTypes.SVG_UNIT_TYPE_USERSPACEONUSE(1, Standard) nutzt die Benutzerkoordinaten des Elements, auf das der Pfad angewendet wird.SVGUnitTypes.SVG_UNIT_TYPE_OBJECTBOUNDINGBOX(2) nutzt relative Werte von 0 bis 1 bezogen auf dessen Begrenzungsrahmen (Bounding Box).transform(SVGAnimatedTransformList): Die Transformationsliste aus demtransform-Attribut des<clipPath>.
Du brauchst diese Schnittstelle vor allem dann, wenn du Clipping-Pfade per Skript erzeugst oder änderst. Typische Fälle sind Aufdeck-Effekte, ein „Spotlight“, das dem Mauszeiger folgt, oder zugeschnittene Bilder. Da sie keinen eigenen Konstruktor hat, legst du die Instanz mit document.createElementNS('http://www.w3.org/2000/svg', 'clipPath') an. Der Inhalt des Pfads (z. B. <circle>, <path>, <text>) wird selbst nie gezeichnet, sondern dient nur als Schablone.
Rückgabewert
document.createElementNS() oder durch Abfrage eines vorhandenen <clipPath>-Elements, z. B. mit querySelector('clipPath').Beispiele
Clipping-Pfad per Skript erzeugen und anwenden
const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(SVG_NS, 'svg');
svg.setAttribute('viewBox', '0 0 200 200');
svg.setAttribute('width', '200');
// <defs><clipPath id="kreis"><circle .../></clipPath></defs>
const defs = document.createElementNS(SVG_NS, 'defs');
const clip = document.createElementNS(SVG_NS, 'clipPath');
clip.id = 'kreis';
const circle = document.createElementNS(SVG_NS, 'circle');
circle.setAttribute('cx', '100');
circle.setAttribute('cy', '100');
circle.setAttribute('r', '80');
clip.append(circle);
defs.append(clip);
// Bild, das kreisförmig zugeschnitten wird
const img = document.createElementNS(SVG_NS, 'image');
img.setAttribute('href', 'https://picsum.photos/200');
img.setAttribute('width', '200');
img.setAttribute('height', '200');
img.setAttribute('clip-path', 'url(#kreis)');
svg.append(defs, img);
document.body.append(svg);
console.log(clip instanceof SVGClipPathElement);clipPathUnits auslesen und auf objectBoundingBox umstellen
const clip = document.querySelector('#kreis');
console.log(clip.clipPathUnits.baseVal === SVGUnitTypes.SVG_UNIT_TYPE_USERSPACEONUSE);
// Auf relative Koordinaten (0–1) umstellen – das Attribut wird automatisch gesetzt
clip.clipPathUnits.baseVal = SVGUnitTypes.SVG_UNIT_TYPE_OBJECTBOUNDINGBOX;
// Inhalt muss jetzt in relativen Werten angegeben werden
const circle = clip.querySelector('circle');
circle.setAttribute('cx', '0.5');
circle.setAttribute('cy', '0.5');
circle.setAttribute('r', '0.4');
console.log(clip.getAttribute('clipPathUnits'));Transformation über die transform-Liste drehen
const svg = document.querySelector('svg');
const clip = document.querySelector('#kreis');
// Neue SVGTransform-Instanz über das Wurzel-<svg> erzeugen
const rotation = svg.createSVGTransform();
rotation.setRotate(45, 100, 100);
clip.transform.baseVal.appendItem(rotation);
console.log(clip.transform.baseVal.numberOfItems);
console.log(clip.getAttribute('transform'));Spotlight-Effekt: Clipping-Kreis folgt der Maus
const svg = document.querySelector('svg');
const spot = document.querySelector('#kreis circle');
const folgen = (event) => {
// Bildschirmkoordinaten in SVG-Koordinaten umrechnen
const pt = new DOMPoint(event.clientX, event.clientY)
.matrixTransform(svg.getScreenCTM().inverse());
spot.setAttribute('cx', pt.x.toFixed(1));
spot.setAttribute('cy', pt.y.toFixed(1));
};
svg.addEventListener('pointermove', folgen);