我在网页上添加了一些SVG路径,但是我在使用Firefox 43.0时遇到了困难。当我将transform: scale(0.1)
应用于我的路径时,Firefox似乎不会更新边界客户端矩形(通过getBoundingClientRect()
)
这里是变换前路径的截图,以及正确的边界矩形:
这里应用了变换,视觉清晰地位于边界框之外:
相比之下,Chrome会按预期更新其边界框。 (注意约束比例。)
此问题在Chrome或Edge上都不存在。我确实发现this old bug from 2012表示问题已在版本12.0中修复,文档说明:
从Gecko 12.0(Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9)开始,在计算元素的边界矩形时会考虑CSS变换的效果。
......这似乎不是真的。对于其他浏览器,我将我的圆圈缩小到其原始大小的10%,然后计算客户端矩形的坐标偏移量,使其居中于原始的100%比例位置。但是,由于在Firefox中进行转换后客户端矩形没有更新,因此它会搞乱计算。
我如何解决这个问题?
答案 0 :(得分:4)
可以通过属性设置变换,例如
<path transform="scale(0.1)" d="..."/>
你正在做的或CSS。使用CSS是更新的方法; SVG 1.1规范仅指定属性转换。
getBoundingClientRect doesn't take CSS transforms into account目前在Firefox上,但它确实考虑了转换属性。