如何使用JavaScript获取缩放的SVG元素的宽度？

Question

如果我有内联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属性的元素:

<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控制台.这里我硬编码了一个数字.3这是包含svg节点/ 1000个用户单位的div的300px宽度.

在看到赏金之后,这是我返回的功能,没有太多得到缩放的宽度(没有数学我不确定.)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/