倾斜转换后获取SVG元素的宽度和高度-javascript

Question

我有一个带有以下属性的SVG rect ：

<rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;"  />

如果我应用skewX(10)变换，则矩形的宽度和高度会改变。 然后，如何使用普通javascript（不带库）计算其真实宽度和高度？

Answer 1

将<rect>包装在<g>元素中； 然后获得对该小组的参考； 然后在其上调用getBBox() 。

 var bbox = document.getElementById("wrapper").getBBox();; alert("width=" + bbox.width + " height=" + bbox.height); 

 <svg> <g id="wrapper"> <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(10)" /> </g> </svg> 

我们将元素包装在一个组中的原因是， getBBox()返回的边界框不包含转换的效果。 另外，它不必是<g>它可以是<rect>任何父元素，只要没有其他可能影响边界的子元素即可。

或者，您可以像Stephen一样使用三角学。