带有 SVG 文本动画 (CSS3) 的工件答案

【问题标题】：Artifacts with SVG text animations (CSS3)带有 SVG 文本动画 (CSS3) 的工件
【发布时间】：2013-09-18 00:51:30
【问题描述】：

我在大多数现代浏览器中都遇到了文本动画/缩放问题：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 中文本的方法。

非常感谢您的帮助！

编辑：错字

【问题讨论】：

标签： css svg css-animations svg-animate visual-artifacts

【解决方案1】：

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

【讨论】：

简单、快速，适用于所有主流浏览器。我将它转换为 JavaScript 的“\u00A0”。谢谢！

【解决方案2】：

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

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

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

【讨论】：