私はSVG要素の現在の行列変換を取得するための非常に簡単な方法を知っている

// 't' is a string 
var t = window.getComputedStyle(nativeElement, null).transform 
console.log(t);

問題がこれ以上6以下でその前のメソッドが返す番号です小数。たとえば、前のコードでは、次のように返されます。

matrix(0.965926, 0.258819, -0.258819, 0.965926, 0, 0)

SVG要素の行列変換をより正確に取得する方法はありますか？

2017-09-26 Cequiel

は、属性やスタイルを変換するのですか？ –

トランスフォームは属性です：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform – Cequiel

あなたは質問のスタイルとして扱っているので、私は尋ねました。それがスタイルの場合はあまり行なわれません。属性であれば、DOMを介して取得できます。 –

SVGMatrixオブジェクトとして現在のtransform属性を取得するには、使用することができます：

element.transform.baseVal.consolidate().matrix

var myrect = document.getElementById("myrect"); 
 

 
console.log(myrect.transform.baseVal.consolidate().matrix);

<svg> 
 
    <rect id="myrect" width="10" height="10" transform="scale(2) rotate(45)"/> 
 
</svg>

2017-09-27 13:17:21

答えて