SVG字体动画

Question

我有一个移动应用程序，涉及以跑马灯方式移动文本。我使用了CSS3动画，但在移动设备上看起来很卡顿。我选择使用SVG作为动画。如何在SVG中实现跑马灯动画？我对此很陌生。

- Andrien Pecson

---

SVG 不可能比 CSS3 动画表现更好。 - Robert Longson

Robert Longson，感谢您的回复，但我能否使用SVG在文本上执行跑马灯效果？ - Andrien Pecson

你可以通过SMIL来完成。你提供的问题细节越多，我能提供的指导就越多。 - Robert Longson

那么你需要一本书而不是问答服务。 - Robert Longson

并非每个问题都有简单的答案。你的问题就像是“我已经建了一座公寓，如何建造一艘类似于我的公寓的游艇”。你没有告诉我们关于公寓的任何信息，所以我们无法告诉你如何建造你想要的游艇。即使我们知道了，答案也会比较高级。 - Robert Longson

请在您的问题中添加更多细节。如果您有一个可用的CSS版本，请包含它，以便我们可以看到您想要实现什么样的效果。 - Paul LeBeau

Answer 1

这里有一个简单的滚动文字动画。希望这能让你入门。

网上有很多关于如何制作SVG动画的教程。如果您需要更多信息，也可以阅读SVG规范。

请注意，像这样使用SMIL动画（SMIL是使用<animate>标签的动画）在IE中无法工作。但如果您需要支持IE，可以使用FakeSmile等库。

<svg width="500" height="100">
  <text x="0" y="80" font-size="80">Here is some scrolling text
    <animate attributeType="XML" attributeName="x" 
         values="520;-880;520" dur="15s" repeatCount="indefinite"/>
  </text>
</svg>

- Paul LeBeau