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

【问题标题】：How do I set the start position when using svg-animate to set the CSS property of a svg-text element?使用 svg-animate 设置 svg-text 元素的 CSS 属性时如何设置起始位置？
【发布时间】：2015-01-28 12:21:13
【问题描述】：

我想使用 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 元素最初呈现为 100 像素，等待 2 秒，然后在 1 秒内缩小到 0 像素。相反，svg-text 元素最初呈现为默认字体大小（~14px），等待 2 秒，跳转到 100px，然后缩小到 0px。

如果修改上面的代码来设置svg-text元素的font-size...

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

... 你会遇到不同的问题。现在 svg-text 元素最初以 100 像素呈现，然后无法动画。风格完全取代了动画。此示例代码使用字体大小，但尝试为任何 CSS 样式设置动画都会遇到同样的问题。

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

【问题讨论】：

标签： svg svg-filters

【解决方案1】：

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

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

另一种方法是设置 3 个值并将 begin 设置为 0，以便动画最初开始但不执行任何操作，然后在 2 秒后执行您想要的效果。为此，您不需要正确的初始样式，因为动画会从一开始就覆盖它。

【讨论】：

谢谢。这比我预期的要简单得多。

【解决方案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

【讨论】：