Artifacts with SVG text animations (CSS3)
我在大多数现代浏览器中都遇到了文本动画/缩放问题：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 属性以获得更好的渲染效果：
|
1
2 3 |
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0); -webkit-transform: translate3d(0,0,0); |
或使用
|
1
|
-webkit-transform: scale(1.1);
|
甚至
|
1
|
|
在所有提到的浏览器中都具有相同的效果。
我还没有提交任何错误报告，因为我很难想象 WebKit、Presto (Opera) 和 Internet Explorer 10 都有相同的渲染错误。
我希望有另一种缩放 SVG 中文本的方法，我还不知道。
非常感谢您的帮助！
编辑：错字
一个似乎也有效的廉价技巧是在文本末尾添加一个不可破坏的空格(即
不是真正的解决方案，但在类似情况下(至少在 Chrome 中)对我有帮助的是以下虚拟更新：
|
1
|
jQuery(‘<style></style>’).appendTo(jQuery("#gsegMapDiv")).remove();
|
并不过分优雅，但它会强制 Chrome 检查其渲染 – 并在触发时移除工件，例如上面 jsfiddle 中的 onmouseout.
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269225.html