| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <head> |
| <title>Animating the "rotate" property on an SVG element</title> |
| <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> |
| <link rel="match" href="rotate-animation-on-svg-ref.html"> |
| |
| <style> |
| |
| @keyframes rotate-animation { |
| from { rotate: 0; } |
| to { rotate: 180deg; } |
| } |
| |
| svg { |
| width: 400px; |
| height: 400px; |
| overflow: visible; |
| } |
| |
| rect { |
| width: 100px; |
| height: 100px; |
| transform-origin: 100px 100px; |
| animation: rotate-animation 1ms linear forwards; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <svg><rect></rect></svg> |
| |
| <script> |
| |
| (async function() { |
| await Promise.all(document.getAnimations().map(animation => animation.finished)); |
| document.documentElement.classList.remove("reftest-wait"); |
| })(); |
| |
| </script> |
| </body> |
| </html> |
