SVG-Transformationen in JavaScript

8

SVG-Transformationen können über JavaScript durchgeführt werden, indem ihre entsprechenden Attribute setAttribute("transform", "translate(x,y)") eingestellt werden, aber auch durch reines JavaScript.

%Vor%

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

    
Roger 29.05.2013, 10:02
quelle

1 Antwort

20

Jedes Element <svg> hat eine Methode createSVGMatrix dom.

%Vor%

Dies ist die Identitätsmatrix.

Sie können dann das manipulieren ...

%Vor%

oder direkt ...

%Vor%

und dann benutze es

%Vor%

getItem (0) ruft das erste Element in einem Transformationsattribut ab, z. B.

%Vor%

getItem(0) erhält die translate(1, 1) Matrix und getItem(1) erhält die scale(2) Matrix

Wenn Sie für ein Element keine Transformation festgelegt haben, wird getItem(0) ausgeben. Sie können überprüfen, wie viele Elemente numberOfItems verwenden und / oder ein erstes Element hinzufügen, indem Sie createSVGTransformFromMatrix verwenden, um Ihre Matrix in eine Transformation und appendItem umzuwandeln, um die Transformation anzuhängen.

    
Robert Longson 29.05.2013, 10:32
quelle