如果我有内联 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不考虑缩放比例。
最佳答案
请检查这个 fiddle http://jsfiddle.net/T723E/ .单击矩形并注意 firebug 控制台。 在这里，我硬编码了一个数字 .3，它是包含 svg 节点/1000 个用户单元的 div 的 300 像素宽度。
看到赏金后，这是我返回的函数，无需太多(没有数学我不确定。)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))
请查看此 fiddle 以获取完整代码 http://jsfiddle.net/b4KXr/
关于javascript - 如何使用 JavaScript 获取缩放后的 SVG 元素的宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9197118/