SVG - Change dur value

by Salustiano Silva

HTML

<svg width="400px" heigth="400px">
    <rect ry="0" rx="0" x="100" y="100" width="50" height="50" fill="blue" id="rect">
		<animateTransform 
            id="animacao"
			attributeType="xml"
			attributeName="transform"
			type="rotate"
			from="0 125 125"
			to="360 125 125"
			dur="2"
			repeatCount="indefinite" 
		/>
	</rect>
</svg>
<input type="number" id="input_number" name="input_number" />
<button id="alterar">alterar</button>

JavaScript

document.getElementById("alterar").addEventListener("click", handler);

function handler(e) {

    var novaDuracao = document.getElementById("input_number").value;

    document.getElementById("animacao").setAttribute('dur', novaDuracao);
}