What am I doing wrong trying to rotate some SVG through an animateTransform tag with "spline" calcmode?

Question

I'm trying to animate a triangle so that its rotation accelerates (and later comes to a stop after a full rotation) and I am trying to use the animateTransform SVG tag, with the calcmode attribute set to "spline".. I can easily get the triangle to rotate with a continuous motion, but it's not the smooth acceleration I'm looking for. Here is the code I'm using - when viewing this in Firefox it shows no animation at all :

<svg xml:lang="fr" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
<![CDATA[
*{
fill:none;
stroke:black;
}
]]>
</style>
<g class="triangle">
<path d="M 349.9999999999999 163.3974596215561 L 200 250.00000000000006 " />
<path d="M 200 250.00000000000006 L 350 336.60254037844385 " />
<path d="M 350 336.60254037844385 L 349.9999999999999 163.3974596215561 " />
<animateTransform 
attributeName="transform"
type="rotate"
from="0 300 250" to="360 300 250"
begin="0s" dur="10s"
repeatCount="indefinite"
calcmode="spline"
keyTimes="0; 0.25; 0.5; 0.75; 1"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
/>
</g>
</svg>

What am I doing wrong? Should I use CSS animations instead? Any kind of non-continuous rotation would be a win.

I tried various value combinations for the keyTimes / keySplines attributes, but the only result I got was a continuous rotation - for example, with


    keyTimes="0; 1"
    keySplines="0.5 0 0.5 1"

Robert Longson · Accepted Answer · 2023-02-12T16:24:16.193

The SVG specification says:

For animations specified with a ‘values’ list, the ‘keyTimes’ attribute if specified must have exactly as many values as there are in the ‘values’ attribute. For from/to/by animations, the ‘keyTimes’ attribute if specified must have two values.

So we either need to reduce the number of keyTimes values or move to using values and then have a matching number of values.

I've set some example values below and the shape now rotates at various speeds.

html, body {
  width: 100%;
  height: 100%;
}

svg {
  width: 100%;
  height: 200%;
  transform: translate(-100px, -130px);
}

<svg xml:lang="fr" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
<![CDATA[
path {
fill:none;
stroke:black;
stroke-width:10px;
}
]]>
</style>
<g class="triangle">
<path d="M 349.9999999999999 163.3974596215561 L 200 250.00000000000006 " />
<path d="M 200 250.00000000000006 L 350 336.60254037844385 " />
<path d="M 350 336.60254037844385 L 349.9999999999999 163.3974596215561 " />
<animateTransform 
attributeName="transform"
type="rotate"
values="0 300 250;100 300 250;130 300 250;200 300 250;360 300 250"
begin="0s" dur="10s"
repeatCount="indefinite"
calcmode="spline"
keyTimes="0; 0.25; 0.5; 0.75; 1"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
/>
</g>
</svg>

The triangle rotation looks exactly like what I'm looking for when I click the "Run code snippet" button, but when I copy / paste the code to a local file and open it with Firefox (or get it through a local server), the animation does not look the same : the rotation speed transitions are discrete -there is no easing at all-. Is there something i'm missing - or maybe something that the code snippet viewer adds before running the code? — Bert Meera, Feb 17 '23 at 14:05
After some more tests, I can confirm that in this case, the same SVG code produces different animation results depending on whether it's included within the of an .HTML file or if it's a standalone .SVG file - which I find a little disturbing, because I don't have any explanation for this difference. Anyway, your answer helped a lot. Thanks! — Bert Meera, Feb 18 '23 at 13:31

What am I doing wrong trying to rotate some SVG through an animateTransform tag with "spline" calcmode?

1 Answers1