CSS transform transition on SVG element

Question

I'm trying to display and immediately animate a rotation of a SVG element using a CSS transition.

const node = getSVGElement(); // Has 'transform' set to 'rotate(0)'
node.classList.add('svg-animation');

const parent = document.getElementById('someDiv');
parent.appendChild(node);

setTimeout(() => {
node.setAttribute('transform', `rotate(${someOtherValue})`);
    }
}, 50);

And in CSS:

.svg-animation {
    transition: transform 0.5s ease-in-out;
}

This works as intended in Chrome, but Firefox and Safari display the element without animating it at all. Is there a different syntax (or method) that should be used so that it works in these browsers (I don't care about IE)?

Been at it for a day, can't get even the simplest animation to render: ` Foo ` This is right in front of me in the web source, not in JS or other source code, and nothing is animating. Is SMIL the *only* solution? (I only need a simple transition between two rotation values). — Cirrocumulus, Sep 26 '21 at 20:33
Your SMIL code works for me, the font-size animates. If you don't use SMIL you could implement all the intermediate steps yourself in javascript but SMIL's far easier. — Robert Longson, Sep 26 '21 at 20:38
Well, I can't get any of this to work on my end (Firefox or Chrome). Also, incorporating a *third* animation syntax (after JS & CSS) into my app seems like total overkill. — Cirrocumulus, Sep 26 '21 at 20:59
https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#transformation_animation — Robert Longson, Sep 26 '21 at 21:01
[Force a reflow](https://stackoverflow.com/questions/55134528/css-transition-doesnt-start-callback-isnt-called/55137322#55137322) rather than waiting random time. — Kaiido, Sep 27 '21 at 01:10
Is there a limitation in SMIL when adding the `animate` at runtime via JS? I thought I might as well see if it works but I can't even get a simple color transition to animate. — Cirrocumulus, Sep 27 '21 at 05:33

score 0 · Answer 1 · answered Oct 01 '21 at 13:59

Here you have two different ways to solve the problem. First using JavaScript and second using SMIL. From your code example it is not clear what the problem is, but make sure that the DOM is loaded before finding the element and then use the style property on the element instead of setting the attribute.

What solution to go for is up to you. I would say it depends on the context.

var someOtherValue = 90;

document.addEventListener('DOMContentLoaded', e => {
  const node = document.querySelector('rect');
  node.classList.add('svg-animation');

  setTimeout(() => {
    node.style.transform = `rotate(${someOtherValue}deg)`;
  }, 500);
});

.svg-animation {
  transition: 1s ease-in-out;
}

<svg viewBox="0 0 100 100" width="200">
  <g transform="translate(50 50)">
    <rect x="-20" y="-20" width="40" height="40" fill="navy"/>
  </g>
</svg>

<svg viewBox="0 0 100 100" width="200">
  <g transform="translate(50 50)">
    <rect x="-20" y="-20" width="40" height="40" fill="navy">
      <animateTransform attributeName="transform"
        attributeType="XML"
        type="rotate"
        from="0" to="90"
        calcMode="spline" keyTimes="0;1" keySplines=".5 0 .5 1"
        begin="1s" dur="1s" fill="freeze"/>
    </rect>
  </g>
</svg>

score 0 · Answer 2 · answered Jun 07 '22 at 23:03

Instead of setAttribute try a css transform; remember to specify units.

node.style.transitionDuration = '1s';
let rotation_angle_deg = 10
node.style.transform = 'rotate('+rotation_angle_deg+'deg)';

I've only tested this in Safari 15.5 but it works there and I can confirm that setAttribute ignores any transition-duration

CSS transform transition on SVG element

2 Answers2