SVG-Transformationen in JavaScript

Question

SVG-Transformationen können über JavaScript vorgenommen werden, indem die entsprechenden Attribute setAttribute("transform", "translate(x,y)") gesetzt werden, aber auch durch pure JavaScript möglich sein sollen.

elem.transform.baseVal.getItem(0).setTranslate(x, y); 
elem.transform.baseVal.getItem(0).setRotate(x, y); 

Diese beiden sollten für die Translation und Rotation arbeiten, aber wie wäre es mit Schrägstellung, Skalierung und Matrix? elem.transform.baseVal.getItem(0).setMatrix() existiert, aber soweit ich das beurteilen kann, sind keine Params ausgenommen und akzeptiert auch keine Params. Wie soll ich das machen und als Bonusfrage: Was macht eigentlich getItem(0)?

Answer 1

Jedes <svg> Element hat eine createSVGMatrix Dom-Methode.

var matrix = svgElement.createSVGMatrix(); 

Dies ist die Identitätsmatrix.

Sie können dann manipulate this ...

matrix = matrix.translate(10, 10); 

oder direkt ...

matrix.a = 3; 

und dann verwenden sie

elem.transform.baseVal.getItem(0).setMatrix(matrix); 

getItem(0) wird das erste Element in einem Attribut-Transformation z.B

transform="translate(1, 1) scale(2)" 

getItem(0) bekommt die translate(1, 1) Matrix und getItem(1) bekommt die scale(2) Matrix

Wenn Sie nicht eine Transformation auf ein Element dann getItem(0) werfen gesetzt haben. Sie können überprüfen, wie viele Elemente verwendet werden numberOfItems und/oder fügen Sie ein erstes Element mit createSVGTransformFromMatrix, um Ihre Matrix in eine Transformation und appendItem zum Anhängen der Transformation.