Animating a value of a tag attribute

Question

Is there a way to animate a value of dy attribute of SVG's tspan using JavaScript, ideally using Web Animations API?

The value of dy is known to be animatable using <animate /> element (as seen here):

<svg>
  <text x="30" y="30">FairBridge
    <animate attributeName="dy" from="0 0 0" to="0 -20 20" dur="1s" repeatCount="indefinite"/>
  </text>
</svg>

I am wondering if it's possible to convert that animation to JavaScript.

For context, I've been using KeyframeEffect for all my previous animations, and would prefer to use it to animate the attribute value too in order to keep the animations code consistent.

In case there's absolutely no way to use KeyframeEffect, how would one go about animating a generic value of a tag attribute?

call setAttribute repeatedly via setInterval SMIL is much easier though. — Robert Longson, Dec 18 '22 at 18:57
@RobertLongson I am hearing `setInternal` is not particularly convenient to use in animations, as the interval set may not be respected strictly — oldhomemovie, Dec 18 '22 at 20:35
WAAPI is, as far as I was able to ascertain, [not able](https://browser-unplugged.net/blog/waapi.en.html) to handle SMIL attribute animations. — ccprog, Dec 18 '22 at 21:19
@ccprog very nice, thanks for pointer! Out of curiosity, after a bit digging I've also found [this](https://bugs.chromium.org/p/chromium/issues/detail?id=596377&q=animate%20attribute%20SMIL&can=2) (Chromium), while failing to find a ticket with relevant title in Webkit/Firefox bug trackers. — oldhomemovie, Dec 18 '22 at 21:44
Quote: "This was all in the interest of deprecating SMIL in favour of CSS and Web Animations. If that's no longer a priority then neither is this I suspect." Deprecating SMIL was an idea that Chrome devs had to [retract on](https://stackoverflow.com/questions/64514150#67471118) very soon after the anouncement. — ccprog, Dec 18 '22 at 22:20
It took some time to remember, but there is an older [article on CSS tricks](https://css-tricks.com/how-to-animate-text-with-svg-and-css/) that tried its hand at animating letters. There are several different approaches in the comments. Those that use CSS would be translatable to WAAPI. — ccprog, Dec 19 '22 at 09:34
@ccprog thanks a lot for links with further context on this! — oldhomemovie, Dec 20 '22 at 09:47

chrwahl · Answer 1 · 2022-12-20T11:47:53.937

Only the presentation attributes can be animated using Web Animations API, because they are also CSS properties, XML attributes cannot.

In this example I can animate fill and rotate, but not x and dy. When I give the x property the wrong value (like '100' or 100) I get an error in the FireFox console -- strange when the right value has no effect. dy is just ignored.

var text1 = document.getElementById('text1');

var textKeyframes = new KeyframeEffect(
  text1, [{
      fill: 'red',
      rotate: '0deg',
      x: '0px',
      dy: '0px'
    },
    {
      fill: 'green',
      rotate: '90deg',
      x: '100px',
      dy: '100px'
    }
  ], {
    duration: 2000,
    fill: 'forwards'
  }
);

var textAnimation = new Animation(textKeyframes, document.timeline);

textAnimation.play();

<svg viewBox="0 0 800 200">
  <g transform="translate(100 100)">
    <text id="text1" text-anchor="middle" dominant-baseline="middle"
      font-size="30">FairBridge </text>
  </g>
</svg>

Presentation attributes can be animated, because they are also CSS properties, XML attributes cannot. See the [authoritative list](https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes). — ccprog, Dec 20 '22 at 09:57

Animating a value of a tag attribute

1 Answers1