JavaScriptでスケーリングされたSVG要素の幅を取得するにはどうすればよいですか？

Question

私はスケールされた要素を含むインラインSVG、... viewBox属性で<svg>要素である

<g transform="scale(sX,sY)"> 
    <rect id="myElement" x="107" y="32" width="245" height="31" stroke="#C6C3C6" stroke-width="1px" /> 
</g> 

...またはお持ちの場合：

<svg viewBox="20 20 5000 1230"> 
    <g transform="scale(sX,sY)"> 
     <rect id="myElement" x="107" y="32" width="245" height="31" stroke="#C6C3C6" stroke-width="1px" /> 
    </g> 
<svg> 

を...手動でスケーリングを検出して数学を行うことなく、プログラムで新しいピクセルの幅をmyElementで見つけることができますか？今のところmyElement.getBBox().widthは、スケーリングを考慮しないで245を返します。

Answer 1

このフィドルhttp://jsfiddle.net/T723E/をチェックしてください。四角形をクリックし、Firebugのコンソールに注目してください。 ここでは、svgノード/ 1000ユーザユニットを含むdivの300px幅である数値.3をハードコードしています。恵みを見た後、これは私はあまりせずに拡大縮小幅を取得するためのリターン持っている機能です

（私はよく分からない無数学では。）maths.Use matrix.dスケール高さ

var svg = document.getElementById('svg'); 
    function getTransformedWidth(el){ 
     var matrix = el.getTransformToElement(svg); 
     return matrix.a*el.width.animVal.value; 
    } 

    var ele = document.getElementById('myElement_with_scale') 
    console.log("scale width----", getTransformedWidth(ele)) 

を取得するためしてください完全なコードのためにこのフィドルを見てくださいhttp://jsfiddle.net/b4KXr/

Answer 2

getBBox（）で使用できるパラメータについて調査しましたか？

http://raphaeljs.com/reference.html#Element.getBBox