我有一个具有以下属性的 SVG rect
:
<rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" />
如果我应用 skewX(10)
转换,矩形的宽度和高度会发生变化。然后我如何使用纯 javascript(没有库)计算它的真实宽度和高度?
最佳答案
包装<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 函数。
关于javascript - 倾斜变换后获取SVG元素的宽度和高度 - javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28051819/