javascript - webkit 浏览器中 svg 文本的奇怪行为

Question

我正在使用变换在鼠标滚轮上缩放 svg 组。该组包含一个矩形和一个文本节点。在 Firefox 和 IE 中，这按预期工作：矩形和文本被缩放并且文本保持在相同的位置。但是在 chrome/ipad 中，文本的变化与 rect 不同：当缩放文本时，像这些捕获一样流入和流出 rect：

更新： 感谢罗伯特朗森的回答，我发现了有问题的错误。您可以在此处找到有关文本渲染的更多信息。

Answer 1

一些 UA 仅在字体超过一定大小时才应用不同的字体效果，例如提示和字距调整，因此字体在缩放时不会保持一致的缩放比例。

设置属性 text-rendering="geometricPrecision"可能会有所帮助，尽管没有绝对的保证。

如果失败了，只要有SVGZoom事件，您就必须重新计算边界框。