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/

的小提琴

Answer 2

您是否调查了可以与getBBox（）一起使用的参数？

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

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

2 个答案: