关于 css：带有 SVG 文本动画 (CSS3) 的工件

沃梦达教程前端开发

2022-09-21

Artifacts with SVG text animations (CSS3)我在大多数现代浏览器中都遇到了文本动画/缩放问题：Chrome 29、IE10、Safari 5.1 (Windows)、Safari 6.0.5 (Mac)...

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

甚至

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

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

非常感谢您的帮助！

编辑：错字

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