Question

我想使用svg-animate来动画svg-text元素的CSS属性。我可以让动画工作正常，但CSS起始位置是默认样式而不是第一个关键帧的样式。

下面的代码说明了问题：

<svg id="foo" width="500">
  <text x="0" y="100" style="fill: white;">
    Some Text
  </text>
</svg>
<svg>
  <animate 
    xlink:href="#foo"
    attributeType="CSS" 
    attributeName="font-size" 
    values="100px; 0px" 
    keyTimes="0; 1" 
    dur="1s" 
    begin="2s"
    fill="freeze" />
</svg>

预期和期望的行为是svg-text元素最初呈现为100px，等待2秒，然后在1秒内缩小为0px。相反，svg-text元素最初呈现为默认字体大小（~14px），等待2秒，跳转到100px，然后缩小到0px。

如果修改上面的代码来设置svg-text元素的字体大小......

  <text x="0" y="100" style="font-size: 100px; fill: white;">
    Some Text
  </text>

...你遇到了另一个问题。现在svg-text元素最初呈现为100px，然后无法动画。风格完全取代了动画。此示例代码使用font-size，但是在尝试为任何CSS样式设置动画时会遇到同样的问题。

顺便说一句，我特别需要使用svg-animate而不是CSS过渡动画制作动画，因为我想将此动画与svg-filter动画结合使用（此代码示例中未显示）。

Answer 1

您没有为文本元素设置动画，您可以设置整个SVG的动画并将字体大小级联到文本中。这就是为什么在文本元素上设置样式本身会阻止动画发生，因为它会覆盖父样式。

解决此问题的一种方法是将id移动到文本元素，以便动画直接定位文本元素。另一种方法是在<svg>元素上设置样式，以便动画可以覆盖它。对于这些，您需要设置正确的初始样式。

还有一个是将3个值设置为开始为0，以便动画最初开始但不执行任何操作，然后在2秒后执行您想要的效果。为此，您不需要正确的初始样式，因为动画将从get go中覆盖它。

Answer 2

罗伯特打败了我，得到了更好的答案，就像我回答的那样，这里是一个例子，无论如何我都会这样做（这与罗伯茨的第一种方法相符）......

<svg id="foo" width="500">
  <text id="footext" x="0" y="100" font-size="100px" style="fill: red;">
    Some Text
 </text>
</svg>
<svg>
  <animate 
    xlink:href="#footext"
    attributeType="CSS" 
    attributeName="font-size" 
    values="100px; 0px" 
    keyTimes="0; 1"
    dur="1s" 
    begin="2s"
    fill="freeze" />
</svg>

jsfiddle

使用svg-animate设置svg-text元素的CSS属性时，如何设置起始位置？

2 个答案: