chromium/third_party/blink/web_tests/svg/animations/animateTransform-rotate-around-point.svg

<?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>