倾斜变换后获取 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 建议的那样使用三角函数。

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

getting the width and height of SVG element after skew transformation - javascript

javascript

svg