How do I set the start position when using svg-animate to set the CSS property of a svg-text element?

I want to use svg-animate to animate CSS properties of an svg-text element. I can get the animation to work fine, however the CSS starting position is the default style rather than the style of the first keyframe.

The code below illustrates the problem:

<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>

The expected and desired behavior is for the svg-text element to initially render as 100px, wait 2 seconds, then shrink to 0px over 1 second. Instead, the svg-text element initially renders as the default font-size (~14px), waits 2 seconds, jumps to 100px, then shrinks to 0px.

If you modify the code above to set the font-size of the svg-text element...

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

... you get a different problem. Now the svg-text element initially renders at 100px, then fails to animate. The style entirely supersedes the animation. This example code uses font-size, but you'll get the same problem trying to animate any CSS style.

By the way, I specifically need to animate using svg-animate rather than a CSS transition animation because I want to combine this animation with an svg-filter animation (not shown in this code sample).

Solution

You're not animating the text element, you're animating the entire SVG and having the font-size cascade into the text. That's why setting the style on the text element itself prevents the animation from occurring because it overrides the parent style.

One way of solving this would be to move the id to the text element so that the animation directly targets the text element. Another would be to set the style on the <svg> element so that it can be overridden by the animation. For these you'd need to set the correct initial style.

Yet another would be to have 3 values an set the begin to 0 so that the animation starts initially but does nothing and then after 2 seconds does the effect you want. For this you don't need the correct initial style as the animation will override it from the get go.