SVGTransform.type — Eigenschaft · JavaScript-Referenz

Signatur

SVGTransform.type

Beschreibung

Die Eigenschaft type eines SVGTransform-Objekts gibt einen unsigned short-Wert zurück. Er zeigt an, um welche Art von Transformation es sich handelt, also etwa eine Verschiebung, Drehung oder Skalierung. Der Wert entspricht einer der Konstanten der Schnittstelle SVGTransform:

SVG_TRANSFORM_UNKNOWN (0): unbekannter Typ, als Wert nicht zulässig
SVG_TRANSFORM_MATRIX (1): matrix(a b c d e f)
SVG_TRANSFORM_TRANSLATE (2): translate(tx ty)
SVG_TRANSFORM_SCALE (3): scale(sx sy)
SVG_TRANSFORM_ROTATE (4): rotate(winkel cx cy)
SVG_TRANSFORM_SKEWX (5): skewX(winkel)
SVG_TRANSFORM_SKEWY (6): skewY(winkel)

Gebraucht wird type vor allem dann, wenn man das transform-Attribut eines SVG-Elements per Skript auswertet, zum Beispiel in Editoren, beim Animieren oder beim Umrechnen in CSS-Transformationen. Über element.transform.baseVal erhält man eine SVGTransformList. Jeder Eintrag darin ist ein SVGTransform, dessen type angibt, wie man die Werte in matrix bzw. angle deuten muss.

Direkt setzen lässt sich die Eigenschaft nicht. Sie ändert sich aber, wenn man eine der Setter-Methoden aufruft: setTranslate(), setScale(), setRotate(), setSkewX(), setSkewY() oder setMatrix(). Auch wenn man die Komponenten von transform.matrix direkt verändert, wechselt der Typ zu SVG_TRANSFORM_MATRIX.

Rückgabewert

Typ

number

Beschreibung

Eine Ganzzahl von 0 bis 6, die einer der SVG_TRANSFORM_*-Konstanten entspricht.

Beispiele

Transformationstypen eines Elements auslesen

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

const list = rect.transform.baseVal;
for (let i = 0; i < list.numberOfItems; i++) {
  console.log(list.getItem(i).type);
}

2 4 3

Typnummer in lesbaren Namen umwandeln

const TYPE_NAMES = {
  [SVGTransform.SVG_TRANSFORM_UNKNOWN]: 'unknown',
  [SVGTransform.SVG_TRANSFORM_MATRIX]: 'matrix',
  [SVGTransform.SVG_TRANSFORM_TRANSLATE]: 'translate',
  [SVGTransform.SVG_TRANSFORM_SCALE]: 'scale',
  [SVGTransform.SVG_TRANSFORM_ROTATE]: 'rotate',
  [SVGTransform.SVG_TRANSFORM_SKEWX]: 'skewX',
  [SVGTransform.SVG_TRANSFORM_SKEWY]: 'skewY',
};

const describeTransforms = (el) =>
  Array.from({ length: el.transform.baseVal.numberOfItems }, (_, i) => {
    const t = el.transform.baseVal.getItem(i);
    return t.type === SVGTransform.SVG_TRANSFORM_ROTATE
      ? `${TYPE_NAMES[t.type]}(${t.angle}°)`
      : TYPE_NAMES[t.type];
  });

const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
g.setAttribute('transform', 'skewX(15) rotate(30)');
console.log(describeTransforms(g));

["skewX", "rotate(30°)"]

Typ ändert sich durch Setter-Methoden

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const t = svg.createSVGTransform();
console.log(t.type === SVGTransform.SVG_TRANSFORM_MATRIX); // neu erzeugt: Einheitsmatrix

t.setRotate(90, 50, 50);
console.log(t.type, t.angle);

t.setTranslate(5, 5);
console.log(t.type, t.angle);

true 4 90 2 0

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung wie t.type = 2 wird im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus einen TypeError aus. Den Typ ändert man stattdessen mit setTranslate(), setRotate() und den übrigen Setter-Methoden.
Konstanten statt Zahlen: Vergleiche besser mit SVGTransform.SVG_TRANSFORM_ROTATE usw. statt mit festen Zahlen. Der Code bleibt so lesbarer.
Matrix-Änderungen: Wenn man t.matrix.a oder andere Komponenten direkt verändert, wird type zu SVG_TRANSFORM_MATRIX. Der ursprüngliche Typ, etwa rotate, und der Wert von angle gehen dabei verloren.
CSS-Transformationen: transform.baseVal bildet nur das transform-Attribut ab. Über die CSS-Eigenschaft transform gesetzte Transformationen tauchen dort nicht auf.
Kompatibilität: Wird in allen modernen Browsern unterstützt. SVG_TRANSFORM_UNKNOWN kommt in der Praxis kaum vor.

Siehe auch

SVGTransform SVGTransform.matrix SVGTransform.angle SVGTransform.setRotate() SVGTransformList SVGSVGElement.createSVGTransform() DataTransferItem.type