Signatur
Beschreibung
consolidate() fasst alle Einträge einer SVGTransformList zu einer einzigen Transformation zusammen. Dazu werden die Matrizen der einzelnen SVGTransform-Objekte in Listenreihenfolge miteinander multipliziert. Danach enthält die Liste nur noch ein neues SVGTransform vom Typ SVG_TRANSFORM_MATRIX. Die Methode gibt dieses Objekt zurück.
Die Methode ist nützlich, wenn sich an einem Element viele Transformationen angesammelt haben. Das passiert z. B. bei interaktivem Ziehen, Drehen oder Skalieren, wenn bei jedem Schritt ein translate oder rotate angehängt wird. Nach der Konsolidierung bleibt die Liste kurz. Die weitere Arbeit läuft über eine einzige Matrix, die sich mit setMatrix() gezielt verändern lässt.
Sie wird meistens auf element.transform.baseVal aufgerufen. Das Attribut transform im DOM wird dabei aktualisiert und steht anschließend in der Form matrix(a b c d e f) da. Ist die Liste leer, wird nichts verändert, und die Methode gibt null zurück.
Rückgabewert
SVGTransform der Liste (Typ SVG_TRANSFORM_MATRIX) oder null, wenn die Liste leer war.Beispiele
Mehrere Transformationen zu einer Matrix zusammenfassen
const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
const rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('width', '50');
rect.setAttribute('height', '50');
rect.setAttribute('transform', 'translate(10 20) scale(2)');
svg.appendChild(rect);
document.body.appendChild(svg);
const list = rect.transform.baseVal;
console.log('Vorher:', list.numberOfItems);
const t = list.consolidate();
console.log('Nachher:', list.numberOfItems);
console.log(t.type === SVGTransform.SVG_TRANSFORM_MATRIX);
const { a, b, c, d, e, f } = t.matrix;
console.log(a, b, c, d, e, f);
console.log(rect.getAttribute('transform'));Beim Ziehen die Transform-Liste kurz halten
const shape = document.querySelector('#shape');
const svg = shape.ownerSVGElement;
const moveBy = (dx, dy) => {
const list = shape.transform.baseVal;
const step = svg.createSVGTransform();
step.setTranslate(dx, dy);
// Verschiebung vor die bisherige Transformation setzen
list.insertItemBefore(step, 0);
// Alles zu einer Matrix zusammenfassen
list.consolidate();
};
let last = null;
shape.addEventListener('pointerdown', (e) => {
last = { x: e.clientX, y: e.clientY };
shape.setPointerCapture(e.pointerId);
});
shape.addEventListener('pointermove', (e) => {
if (!last) return;
moveBy(e.clientX - last.x, e.clientY - last.y);
last = { x: e.clientX, y: e.clientY };
});
shape.addEventListener('pointerup', () => { last = null; });Leere Liste ergibt null
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
const result = circle.transform.baseVal.consolidate();
console.log(result);// Wichtig · Fallstricke
- Nur auf
baseValaufrufen:animValist schreibgeschützt. Ein Aufruf dort wirftNoModificationAllowedError. - Die ursprüngliche Zerlegung geht verloren: Nach der Konsolidierung lassen sich einzelne Werte wie Winkel oder Skalierungsfaktor nicht mehr direkt ablesen.
angleist 0, und das Attribut enthält nur nochmatrix(...). Wer die Einzelwerte behalten will, sollte sie vorher sichern. - Die Reihenfolge zählt: Die Matrizen werden von links nach rechts in Listenreihenfolge multipliziert, genau wie im
transform-Attribut. Ob eine neue Transformation vorne oder hinten eingefügt wird, ändert also das Ergebnis. - Frühere
SVGTransform-Referenzen: Die alten Einträge stehen danach nicht mehr in der Liste. Änderungen an ihnen wirken sich nicht mehr auf das Element aus. - CSS-Transformationen über die Eigenschaft
transformsind davon nicht betroffen, weil die Methode nur mit dem SVG-Attribut arbeitet. - Kompatibilität: wird seit Langem von allen modernen Browsern unterstützt (SVG 1.1, in SVG 2 übernommen).