<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait" onload="setTimeAndSnapshot(101, true)"> <script xlink:href="../smil-util.js" type="text/javascript"/> <!-- Tests to-animation behaviour for a lot of undefined situations. SVG 1.1 doesn't define what should happen here but the behaviour we expect is based on other browsers. --> <!-- to animation: rotation from base value -90 to final value 180 --> <g transform="translate(50 50)"> <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" transform="rotate(-90)"> <animateTransform attributeName="transform" type="rotate" to="180" begin="100s" dur="1.5s" fill="freeze"/> </path> </g> <!-- to animation: rotation from base value -810 to final value 990 --> <g transform="translate(150 50)"> <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" transform="rotate(-810)"> <animateTransform attributeName="transform" type="rotate" to="990" begin="100s" dur="2s" fill="freeze"/> </path> </g> <!-- to animation: rotation from base value -180 to final value 90 but with other animations combined. What happens here is that the rotation animation can't interpolate from the base value as it's not a rotation transformation, so instead it assumes an underlying zero matrix as the base value. (see next comment) --> <g transform="translate(250 50)"> <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" transform="rotate(-90) translate(0 50) scale(2)"> <animateTransform attributeName="transform" type="rotate" to="180" begin="100s" dur="2s" fill="freeze" additive="sum"/> </path> </g> <!-- to animation: rotate and scale Here again the scale animation can't interpolate from its base value which is of a different type so it assumes a zero matrix NOT an identity matrix (this is what the SVG WG have decided in the SVGT1.2 Tiny test suite). --> <g transform="translate(50 150) rotate(90)"> <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" transform="scale(2)"> <animateTransform attributeName="transform" type="rotate" to="180" begin="100s" dur="1s" fill="freeze" additive="sum"/> <animateTransform attributeName="transform" type="scale" to="2" begin="100s" dur="2s" fill="freeze" additive="sum"/> </path> </g> <!-- to animation: translate and rotate Likewise here we end up rotating from 0 to 180 because we can't interpolate from the underlying translation transformation. --> <g transform="translate(150 150)"> <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" transform="rotate(-90) translate(0 50) scale(2)"> <animateTransform attributeName="transform" type="translate" to="0" begin="100s" dur="1s" fill="freeze" additive="sum"/> <animateTransform attributeName="transform" type="rotate" to="180" begin="100s" dur="2s" fill="freeze" additive="sum"/> </path> </g> <!-- The following are from the reference image --> <g transform="translate(250 150)"> <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" transform="rotate(90)"/> </g> <g transform="translate(50 250)"> <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" transform="rotate(90)"/> </g> <g transform="translate(150 250)"> <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" transform="rotate(90)"/> </g> <g transform="translate(250 250)"> <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" transform="rotate(90)"/> </g> </svg>