Firefox getBoundingClientRect()不考虑转换
Dav*_*ner 7 html css firefox svg css-transforms
我正在向我的网页添加一些SVG路径,但是我对Firefox 43.0有困难.看来,当我申请transform: scale(0.1)我的路径时,Firefox不会更新边界客户端矩形(通过getBoundingClientRect())
这是变换前路径的截图,以及正确的边界矩形:
这里应用了变换,视觉清晰地位于边界框之外:
相比之下,Chrome是按预期更新其边界框.(注意约束比例.)
Chrome或Edge上不存在此问题.我确实从2012年发现了这个旧版本的bug,该版本说明问题已在版本12.0中修复,文档说明:
从Gecko 12.0(Firefox 12.0/Thunderbird 12.0/SeaMonkey 2.9)开始,在计算元素的边界矩形时会考虑CSS变换的效果.
......似乎不是真的.对于其他浏览器,我将我的圆圈缩小到其原始大小的10%,然后计算客户端矩形的坐标偏移量,使其居中于原始的100%比例位置.但是,由于在Firefox中进行转换后客户端矩形没有更新,因此它会搞乱计算.
我如何解决这个问题？
可以通过属性设置变换，例如
<path transform="scale(0.1)" d="..."/>
或CSS，就像你正在做的那样。使用 CSS 是较新的方法；SVG 1.1 规范仅指定属性转换。
getBoundingClientRect 目前在 Firefox 上不考虑 CSS 转换，但它确实考虑了转换属性。