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>

当您在浏览器中查看时，我喜欢看到带有文字的移动蓝色圆圈＆＃34;我正在移动＆＃34;。当蓝色圆圈暂停时，它应该有文字＆＃34;我是静止的＆＃34;再继续前行片刻。相反，文本更改不会发生。

我一直在阅读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动画的文本值

1 个答案: