| <?xml version="1.0" encoding="UTF-8"?> |
| <svg xmlns="http://www.w3.org/2000/svg" onload="loaded()"> |
| |
| <rect x="50" y="50" width="100" height="100" fill="green"> |
| <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="45 100 100" begin="0s" dur="1s" fill="freeze"/> |
| </rect> |
| |
| <!-- Beware the end result of this animation is: transform="rotate(22.5 100 250) rotate(22.5 100 250)" which simplifies to rotate(45 100 250) --> |
| <rect x="50" y="200" width="100" height="100" fill="green"> |
| <animateTransform attributeName="transform" type="rotate" from="0 100 250" to="22.5 100 250" begin="0s" dur="1s" fill="freeze"/> |
| <animateTransform attributeName="transform" type="rotate" additive="sum" from="0 100 250" to="22.5 100 250" begin="0s" dur="1s" fill="freeze"/> |
| </rect> |
| |
| <rect x="50" y="350" width="100" height="100" fill="green"> |
| <animateTransform attributeName="transform" type="rotate" accumulate="sum" from="0 50 200" to="22.5 50 200" begin="0s" dur="0.5s" repeatCount="2" fill="freeze"/> |
| </rect> |
| |
| <rect x="200" y="50" width="100" height="100" fill="green"> |
| <animateTransform attributeName="transform" type="translate" additive="sum" from="250,100" to="250,100" begin="0s" dur="1s" fill="freeze"/> |
| <animateTransform attributeName="transform" type="rotate" additive="sum" from="0" to="45" begin="0s" dur="1s" fill="freeze"/> |
| <animateTransform attributeName="transform" type="translate" additive="sum" from="-250,-100" to="-250,-100" begin="0s" dur="1s" fill="freeze"/> |
| </rect> |
| |
| <rect x="200" y="200" width="100" height="100" fill="green"> |
| <animateTransform attributeName="transform" type="translate" additive="sum" from="250,250" to="250,250" begin="0s" dur="1s" fill="freeze"/> |
| <animateTransform attributeName="transform" type="rotate" additive="sum" accumulate="sum" from="0" to="22.5" begin="0s" dur="0.5s" repeatCount="2" fill="freeze"/> |
| <animateTransform attributeName="transform" type="translate" additive="sum" from="-250,-250" to="-250,-250" begin="0s" dur="1s" fill="freeze"/> |
| </rect> |
| |
| <!-- Beware the end result of this animation is: transform="rotate(22.5 250 400) rotate(22.5 250 400)" which simplifies to rotate(45 250 400) --> |
| <rect x="200" y="350" width="100" height="100" fill="green" transform="rotate(22.5 250 400)"> |
| <animateTransform attributeName="transform" type="rotate" additive="sum" accumulate="sum" from="0 125 200" to="11.25 125 200" begin="0s" dur="0.5s" repeatCount="2" fill="freeze"/> |
| </rect> |
| |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function loaded() { |
| document.documentElement.setCurrentTime(2); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| </script> |
| </svg> |