SVG文字动画

Question

我有一个涉及以选取框方式移动文本的移动应用程序。我使用了 css3 动画，它在移动设备上看起来很慢。我选择使用 svg 作为动画。如何在 svg 中实现选取框动画。我是新手。

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>