JavaScript中的SVG轉換

Question

SVG轉換可以通過JavaScript設置其相應的屬性setAttribute("transform", "translate(x,y)")來完成，但也應該可以通過純粹的 JavaScript來完成。

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

這兩個應該適用於平移和旋轉，但如何扭曲，縮放和矩陣？ elem.transform.baseVal.getItem(0).setMatrix()存在，但據我所知，它不包括任何參數，並且SVGCreateMatrix()也不接受任何參數。我應該如何做到這一點，並作爲獎勵問題：getItem(0)實際上做了什麼？

Answer 1

每個<svg>元素都有一個createSVGMatrix dom方法。

var matrix = svgElement.createSVGMatrix(); 

這是單位矩陣。

然後，您可以manipulate this ...

matrix = matrix.translate(10, 10); 

，或者直接...

matrix.a = 3; 

，然後用它

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

getItem(0)獲得的第一個元素在變換屬性例如

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

getItem(0)得到translate(1, 1)矩陣和getItem(1)得到scale(2)矩陣

如果您還沒有設置元素上的轉換，然後getItem(0)將拋出。您可以檢查使用numberOfItems的項目數量和/或使用createSVGTransformFromMatrix添加初始項目以將矩陣轉換爲變換，並添加appendItem以追加變換。