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