SVG Dönüşümler JavaScript içinde

Question

SVG Dönüşümler, ilgili özellikler setAttribute("transform", "translate(x,y)") ile JavaScript yoluyla yapılabilir, ancak aynı zamanda saf JavaScript ile de mümkün olmalıdır.

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

Bu ikisi çeviri ve döndürme için çalışmalı, ancak eğriltme, ölçekleme ve matris hakkında ne yapmalı? elem.transform.baseVal.getItem(0).setMatrix() var, ama anlayabildiğim kadarıyla, herhangi bir param hariç ve SVGCreateMatrix() da herhangi bir param kabul etmiyor. Bunu nasıl yapacağım ve bir bonus soru olarak: getItem(0) aslında ne yapar?

Answer 1

Her <svg> öğesinde createSVGMatrix dom yöntemi vardır.

var matrix = svgElement.createSVGMatrix(); 

Bu, kimlik matrisidir.

Daha sonra manipulate this ...

matrix = matrix.translate(10, 10); 

veya doğrudan ... sonra

matrix.a = 3; 

ve

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

getItem(0) bir dönüşüm Özellikte ilk elemanını alır kullanabilirsiniz Örneğin

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

getItem(0)translate(1, 1) matrisi alır ve getItem(1) sonra getItem(0) atacağım bir bir elemanda dönüşümü ayarlamadıysanız scale(2) matrisi

alır. numberOfItems'u kullanarak kaç öğe olduğunu kontrol edebilir ve/veya matrisi bir dönüşüme dönüştürmek için createSVGTransformFromMatrix kullanarak bir ilk öğe ekleyebilir ve dönüştürmeyi eklemek için appendItem.