SVGAnimatedTransformList.baseVal Property — Eigenschaft · JavaScript-Referenz

Signatur

SVGAnimatedTransformList.baseVal

Beschreibung

Die Eigenschaft baseVal gibt eine SVGTransformList zurück. Sie steht für den Grundwert des transform-Attributs (bzw. gradientTransform und patternTransform), also den Wert ohne Einfluss von SMIL-Animationen wie <animateTransform>. Man erreicht sie meist über element.transform.baseVal.

Die Eigenschaft ist schreibgeschützt: Man kann ihr kein neues Objekt zuweisen. Die zurückgegebene Liste ist aber live und veränderbar. Mit appendItem(), insertItemBefore(), removeItem(), clear() oder consolidate() ändert man das Attribut direkt, ohne Strings parsen oder zusammensetzen zu müssen. Jede Änderung wird sofort ins DOM-Attribut übernommen.

Einsatzgebiete sind zum Beispiel Drag-and-Drop in SVG-Grafiken, programmatisches Drehen und Skalieren oder das Auslesen der aktuellen Transformationsmatrix. Den gerade animierten Wert liefert dagegen animVal.

Rückgabewert

Typ

SVGTransformList

Beschreibung

Live-Liste von SVGTransform-Objekten, die den nicht-animierten Wert des Transformationsattributs darstellen. Ist das Attribut nicht gesetzt, ist die Liste leer (numberOfItems === 0).

Beispiele

Vorhandene Transformationen auslesen

const svg = document.querySelector('svg');
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('transform', 'translate(10 20) rotate(45)');
svg.append(rect);

const list = rect.transform.baseVal;
console.log(list.numberOfItems);
for (let i = 0; i < list.numberOfItems; i++) {
  const t = list.getItem(i);
  // type: 2 = TRANSLATE, 4 = ROTATE
  console.log(t.type, t.angle, t.matrix.e, t.matrix.f);
}

2 2 0 10 20 4 45 0 0

Rotation hinzufügen, ohne einen String zusammenzusetzen

const svg = document.querySelector('svg');
const circle = document.querySelector('#kreis');

const rotation = svg.createSVGTransform();
rotation.setRotate(30, 50, 50); // 30° um den Punkt (50|50)
circle.transform.baseVal.appendItem(rotation);

console.log(circle.getAttribute('transform'));

rotate(30 50 50) // bzw. mit vorher vorhandenen Einträgen davor

Drag-and-Drop mit einer einzigen Translate-Transformation

const svg = document.querySelector('svg');
const shape = document.querySelector('#figur');

const list = shape.transform.baseVal;
let move = list.numberOfItems > 0 && list.getItem(0).type === SVGTransform.SVG_TRANSFORM_TRANSLATE
  ? list.getItem(0)
  : list.insertItemBefore(svg.createSVGTransform(), 0);

let start = null;
shape.addEventListener('pointerdown', (e) => {
  start = { x: e.clientX - move.matrix.e, y: e.clientY - move.matrix.f };
  shape.setPointerCapture(e.pointerId);
});
shape.addEventListener('pointermove', (e) => {
  if (!start) return;
  move.setTranslate(e.clientX - start.x, e.clientY - start.y);
});
shape.addEventListener('pointerup', () => { start = null; });

Alle Transformationen zu einer Matrix zusammenfassen

const g = document.querySelector('g');
g.setAttribute('transform', 'translate(5 5) scale(2)');

const combined = g.transform.baseVal.consolidate();
const { a, d, e, f } = combined.matrix;
console.log(a, d, e, f);
console.log(g.getAttribute('transform'));

2 2 5 5 matrix(2 0 0 2 5 5)

// Wichtig · Fallstricke

Keine Zuweisung möglich: el.transform.baseVal = … hat keine Wirkung (im Strict Mode gibt es einen TypeError). Änderungen laufen immer über die Methoden der Liste.
Die Liste ist live: appendItem() und insertItemBefore() nehmen ein Objekt, das schon in einer anderen Liste steckt, aus dieser heraus. Wer das vermeiden will, übergibt eine Kopie, die mit createSVGTransform() oder createSVGTransformFromMatrix() erzeugt wurde.
CSS-Transformationen fehlen: baseVal spiegelt nur das SVG-Attribut wider. Transformationen aus CSS (style.transform oder Stylesheets) tauchen hier nicht auf. Die tatsächliche Darstellung ermittelt man mit getCTM() bzw. getScreenCTM().
consolidate() ersetzt alle Einträge durch eine einzige Matrix. Die ursprünglichen Typen wie rotate oder scale sind danach verloren.
Das Attribut gibt es nur an Elementen, die SVGGraphicsElement implementieren, sowie über gradientTransform und patternTransform. Bei ungültiger Attributsyntax ist die Liste leer.
Die Eigenschaft wird von allen modernen Browsern unterstützt. animVal ist in manchen Browsern schlicht identisch mit baseVal, weil SMIL dort nur eingeschränkt unterstützt wird.

Siehe auch

SVGTransformList SVGTransform SVGSVGElement.createSVGTransform() SVGGraphicsElement.getCTM() SVGAnimatedTransformList SVGAnimatedTransformList.animVal Property