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

【问题标题】：How do I get the width of a scaled SVG element with JavaScript?如何使用 JavaScript 获取缩放的 SVG 元素的宽度？
【发布时间】：2012-03-01 02:41:50
【问题描述】：

如果我有内联 SVG，包括已缩放的元素...

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

... 或者在具有viewBox 属性的<svg> 元素中：

<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 而不考虑缩放。

【问题讨论】：

标签： javascript svg width

【解决方案1】：

请检查这个小提琴http://jsfiddle.net/T723E/。单击矩形并注意萤火虫控制台。在这里，我硬编码了一个数字 .3，它是 300 像素宽度的 div，包含 svg 节点/1000 个用户单位。

在看到赏金之后，这是我返回的函数以获得缩放宽度而没有太多（没有数学我不确定。）数学。使用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/

【讨论】：

【解决方案2】：

您是否研究过可以与 getBBox() 一起使用的参数？

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

【讨论】：