javascript - 如何在应用变换后获取路径的 getBBox

Question

我有这个svg block ，这个组可以拖动，这样变换矩阵每次拖动时都会改变

<g id="product_1240" transform="matrix(-0.5032,0.8642,-0.8642,-0.5032,80.0928,78.4287)" class="elements">
<path id="p1" d="m -25, -15 l 50,0 l 0,30 l -50,0 z" fill="#fc7f4c" stroke="#FC7F4C" vector-effect="non-scaling-stroke" style="opacity: 0.3;" class="elements" opacity="0.3"></path>
<path id="p2" d="m -20, -10 l 40,0 l 0,20 l -40,0 z" fill="#e5e5e5" stroke="#cccccc" vector-effect="non-scaling-stroke"></path>
</g>

我可以像这样获取元素product_1240的getBBox()

console.log($('#product_1240')[0].getBBox());

这工作正常，但如果我这样做

console.log($('#p1')[0].getBBox());

我得到了结果，但在整个拖动过程中它是静态的，因为没有转换到p1，而只转换到它的父级g。我的问题是无论如何都可以得到应用其父元素 g

的变换矩阵后元素 p1 的 getBBox()

Answer 1

getTransformToElement() 可能就是您想要的。

More usage of getTransformToElement

完成变换后，您可以将其应用到每个 bbox 点以获得变换后的 bbox。