| <svg xmlns="http://www.w3.org/2000/svg" |
| xmlns:xlink="http://www.w3.org/1999/xlink" |
| 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> |