文本值的 SVG 动画

Question

是否有 SVG 动画标签可以让我更改文本标签的内容？

我有一个将项目移动到文本标签旁边的动画，我需要文本与动画同步更新。我还有其他使用 SVG 计时系统向前和向后跳过的功能，所以我明确不想在 JavaScript.

中执行此操作

下面是一些不起作用的示例代码，因为我不知道如何表达更改文本内容的设置标签：

<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-10 -10 600 400'>
  <g>
     <circle r='80' fill='cyan' cx='90' cy='120'/>
     <text x='98' y='120' fill='black' >
       I am moving
       <set attributeName='content' begin='3s' fill='freeze' to='I am stationary'/>
       <set attributeName='content' begin='5s' fill='freeze' to='I am moving'/>
     </text>
     <animateMotion path='M 0 0 L 100 100' begin='0s' dur='3s' fill='freeze' />
     <animateMotion path='M 100 100 L 0 0' begin='5s' dur='3s' fill='freeze' />
  </g>

当您在浏览器中查看此内容时，我喜欢看到带有文本 "I am moving" 的移动蓝色圆圈。当蓝色圆圈暂停时，它应该会暂时显示 "I am stationary" 文本，然后再继续。相反，文本更改不会发生。

我一直在阅读 SMIL animation documentation；虽然让我的文本旋转或改变颜色真的很容易，但我看不出有什么方法可以真正改变文本标签的内容。

Answer 1

SVG 的 SMIL 用于动画属性，而不是内容。因此，您不能使用 SMIL 更改 <text> 元素的内容。正如 Robert Longson 在评论中提到的，一种可能的解决方法是使用两个 <text> 元素：一个用于固定文本，一个用于移动文本。然后，您可以使用 SMIL 为两个 <text> 元素的可见性属性（或显示属性）设置动画，以便一次只有一个 <text> 元素可见。例如...

<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-10 -10 600 400'>
    <g>
        <circle r='80' fill='cyan' cx='90' cy='120'/>
        <text x='98' y='120' fill='black' visibility="visible">
            I am stationary
            <set attributeName='visibility' begin='0s' dur='3s' to='hidden'/>
            <set attributeName='visibility' begin='5s' dur='3s' to='hidden'/>
        </text>
        <text x='98' y='120' fill='black' visibility="hidden">
            I am moving
            <set attributeName='visibility' begin='0s' dur='3s' to='visible'/>
            <set attributeName='visibility' begin='5s' dur='3s' to='visible'/>
        </text>
        <animateMotion path='M 0 0 L 100 100' begin='0s' dur='3s' fill='freeze' />
        <animateMotion path='M 100 100 L 0 0' begin='5s' dur='3s' fill='freeze' />
    </g>
</svg>

请注意，IE 不支持 SVG SMIL 动画。

请注意，Chrome 已弃用对 SVG SMIL 动画的支持，将来可能会删除支持。在 Chrome 中使用 SVG SMIL 动画时，您将在开发者控制台中看到一条警告消息。

文本值的 SVG 动画

SVG animation of text values

svg

svg-animate