animationsvgrotationsplineanimatetransform

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


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"


Solution

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