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); 

これらの2つは翻訳と回転には適していますが、スキュー、スケーリング、マトリックスについてはどうですか？ 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)は、あなたがしてgetItem(0)がスローされます要素に対して変換を設定していない場合はscale(2)行列

を取得します。 numberOfItemsを使用しているアイテムの数を確認したり、最初のアイテムをcreateSVGTransformFromMatrixで追加して、マトリックスをトランスフォームに変換し、appendItemを追加してトランスフォームを追加することができます。