<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait"> <script xlink:href="../smil-util.js" type="text/javascript"/> <script> window.addEventListener("MozReftestInvalidate", run, false); function run() { setTimeAndSnapshot(101, true); } </script> <defs> <g id="smiley"> <circle fill="yellow" stroke="black" stroke-width="1" cx="0" cy="0" r="20"/> <circle fill="white" stroke="black" stroke-width="1" cx="-7" cy="-7" r="7"/> <circle fill="white" stroke="black" stroke-width="1" cx="7" cy="-7" r="7"/> <circle cx="-5" cy="-7" r="2"/> <circle cx="5" cy="-7" r="2"/> <path d="m-11 7a13,13 0 0,0 22,0" fill="none" stroke="black"/> </g> </defs> <!-- to animation This should interpolate from 0 (not 1) to 4 to match the behaviour required by the SVGT1.2 test suite and Opera's behaviour. --> <g transform="translate(50 50)"> <use xlink:href="#smiley"> <animateTransform attributeName="transform" type="scale" to="4" begin="100s" dur="2s" fill="freeze"/> </use> </g> <!-- from-to animation --> <g transform="translate(150 50)"> <use xlink:href="#smiley"> <animateTransform attributeName="transform" type="scale" from="-5" to="9" begin="100s" dur="2s" fill="freeze"/> </use> </g> <!-- negative to-animation Should go from 0 to -4 over 2s, therefore at t=1s, the scale factor should be -2, so we add a rotation animation to correct the gradient --> <g transform="translate(250 50)"> <use xlink:href="#smiley"> <animateTransform attributeName="transform" type="scale" to="-4" begin="100s" dur="2s" fill="freeze"/> <animateTransform attributeName="transform" type="rotate" from="0" to="360" begin="100s" dur="2s" fill="freeze" additive="sum"/> </use> </g> <!-- by animation The behaviour at this point is not clear. The definition of by-animation is: "simple animation in which the animation function is defined to offset the underlying value for the attribute, using a delta that varies over the course of the simple duration, starting from a delta of 0 and ending with the delta specified with the by attribute." (SMILANIM 3.2.2) Therefore it might seem like by-animation of by="1" means to ADD to the underlying scale factor. Furthermore, the underlying scale factor when not otherwise specified might seemt to be 1, but the SVG WG have decided it's 0. This is inconsistent with the definition of addition for animateTransform (post-multiplication of matrices) but it is the behaviour required by SVGT1.2 test suite and used by Opera. The following animation should go from 0 to 4, over 2s so at t=1s, the scale factor should be 2. --> <g transform="translate(50 150)"> <use xlink:href="#smiley"> <animateTransform attributeName="transform" type="scale" by="4" begin="100s" dur="2s" fill="freeze"/> </use> </g> <!-- by animation #2 --> <g transform="translate(150 150)"> <use xlink:href="#smiley" transform="scale(4)"> <animateTransform attributeName="transform" type="scale" by="1" begin="100s" dur="2s" fill="freeze" additive="sum"/> </use> </g> <!-- from-by animation --> <g transform="translate(250 150)"> <use xlink:href="#smiley"> <animateTransform attributeName="transform" type="scale" from="2" by="0" begin="100s" dur="2s" fill="freeze"/> </use> </g> <!-- values animation --> <g transform="translate(50 250)"> <use xlink:href="#smiley"> <animateTransform attributeName="transform" type="scale" values="0; 10; 2; 5; -1" begin="100s" dur="2s" fill="freeze"/> </use> </g> <!-- repetition --> <g transform="translate(150 250)"> <use xlink:href="#smiley"> <animateTransform attributeName="transform" type="scale" from="0" to="0.6" begin="100s" dur="0.3s" repeatCount="4" accumulate="sum" fill="freeze"/> </use> </g> <!-- repeated to-animation (should NOT accumulate) --> <g transform="translate(250 250)"> <use xlink:href="#smiley"> <animateTransform attributeName="transform" type="scale" to="6" begin="100s" dur="0.75" repeatCount="2" accumulate="sum" fill="freeze"/> </use> </g> </svg>