ExampleSection

by prozoroff

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform -->

<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

    <polygon id="pol" points="60,30 90,90 30,90">
 <animateTransform id="anim" attributeName="transform"
                          attributeType="XML"
                          dur="2s"/>
    </polygon>
</svg>

JavaScript

var anim = document.getElementById("anim");

var forward = 1;

document.onclick = function(){
anim.setAttribute('type', 'rotate');
anim.setAttribute('from', '0 60 70');
anim.setAttribute('to', '360 60 70');
anim.setAttribute('dur', '2s');
//forward *= -1;
}