Duas soluções, dependendo se pretendes trabalhar diretamente na caixa de texto ou fazer uso de um botão para disparar a atualização.
Seja de que forma for, para alterares a velocidade da animação, precisas de alterar o valor do atributo dur
no elemento animateTransform
.
Para esse efeito, o mais simples é atribuir um id
a esse elemento para o identificarmos rapidamente no DOM conforme exemplos em baixo.
Solução 1
Diretamente no input, podemos adicionar um evento change
que vai executar código sempre que o mesmo é alterado.
Exemplo também disponível no JSFiddle.
var input = document.getElementById("input_number");
input.addEventListener("change", function handler(e) {
document.getElementById("animacao").setAttribute('dur', input.value);
});
<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" />
Solução 2
Fazendo uso de um botão para realizar a atualização do valor escolhido para a nova duração da animação, vamos anexar um evento de click
ao botão e executar um trecho de código sempre que o mesmo recebe um click
.
Exemplo também disponível no JSFiddle.
// Adicionar evento de clique ao botão
document.getElementById("alterar").addEventListener("click", handler);
// função chamada quando clicamos no botão
function handler(e) {
// apanhar nova duração
var novaDuracao = document.getElementById("input_number").value;
// definir nova duração
document.getElementById("animacao").setAttribute('dur', novaDuracao);
}
<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>