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'会在缩小时留下痕迹。

背景：

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

如果使用transform：scale（2）或当前字体大小转换（：hover - ＆gt; 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检查其渲染效果 - 并在触发时删除工件，例如onmouseout在上面的jsfiddle。

SVG文本动画的工件（CSS3）

实施例

背景：

我尝试了几种解决方法：

2 个答案: