应用转换后如何获取路径的getBBox
How to get getBBox of a path after applying transform
我有这个 svg
块,这个组可以拖动,所以每次拖动时变换矩阵都会改变
<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
。我的问题是无论如何都可以得到 getBBox()
元素 p1
在应用其父元素 g
的变换矩阵后
getTransformToElement()
可能就是你想要的。
More usage of getTransformToElement
完成转换后,您可以将其应用于每个 bbox 点以获得转换后的 bbox。
我有这个 svg
块,这个组可以拖动,所以每次拖动时变换矩阵都会改变
<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
。我的问题是无论如何都可以得到 getBBox()
元素 p1
在应用其父元素 g
getTransformToElement()
可能就是你想要的。
More usage of getTransformToElement
完成转换后,您可以将其应用于每个 bbox 点以获得转换后的 bbox。