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.
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?
Jedes Element <svg>
hat eine Methode createSVGMatrix dom.
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.
Tags und Links javascript svg transformation transform translation