css - 带有 SVG 文本动画 (CSS3) 的工件

Question

我在大多数现代浏览器中遇到了文本动画/缩放的伪影：Chrome 29、IE10、Safari 5.1 (Windows)、Safari 6.0.5 (Mac) 和 Opera 16。只有 Firefox（使用版本 23 测试）工作正常（所有在 Windows 上，Safari 6 除外）。

例子：

http://jsfiddle.net/jejPS/1/

将鼠标悬停在“uf”标签上。文本将放大。离开标签时，“f”会在缩小时留下痕迹。

背景：

这是标签云的一部分。SVG 元素由公司内部库生成（在 jsfiddle 中硬编码）。我增强了我们的实现，在悬停功能上添加了这种缩放。

使用 transform: scale(2) 或当前字体大小转换 (:hover -> 2em) 都没有关系。在没有这些工件的情况下，我还没有找到任何使用 CSS3/SVG-Animations 缩放 svg-text 元素的方法。

注意：这似乎只发生在某些字符上，如“f”或“t”。但是我尝试过的每一种字体

我尝试了几种解决方法：

不同的 CSS3 属性以获得更好的渲染效果：

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0); 
-webkit-transform: translate3d(0,0,0);

或使用

-webkit-transform: scale(1.1);

乃至

<animateTransform attributeName="transform" attributeType="XML" type="scale" from="2" to="1" additive="sum" begin="mouseover" dur="1s" fill="freeze" />

在所有提到的浏览器中都具有相同的效果。

我还没有提交任何错误报告，因为我很难想象 WebKit、Presto (Opera) 和 Internet Explorer 10 都有相同的渲染错误。我希望有另一种在 SVG 中缩放文本的方法，我还不知道。

非常感谢您的帮助！

编辑：错字

Answer 1

一个似乎也有效的廉价技巧是在文本末尾添加一个不可破坏的空格（即。"uf "）。

Answer 2

不是真正的解决方案，但在类似情况下（至少在 Chrome 中）对我有帮助的是以下虚拟更新：

jQuery('<style></style>').appendTo(jQuery("#gsegMapDiv")).remove();

并不过分优雅，但它强制 Chrome 检查其渲染 - 并在触发时删除工件，例如上述 jsfiddle 中的 onmouseout。