2

Tenho uma animação SVG que é uma rotação. Quero alterar o sua velocidade atraves de uma input number (dur=variavel).

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

javascript:

//obter valor da input
var x = document.getElementById("input_number").value;

http://jsfiddle.net/cr493jcw/

1 Resposta 1

1

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .