Использование переходов CSS для анимации динамических атрибутов SVG

Я пытаюсь анимировать атрибуты различных форм SVG с использованием переходов JavaScript и CSS.Использование переходов CSS для анимации динамических атрибутов SVG

Например:

HTML:

<svg width="400" height="400"> 
    <circle id="circle" cx="200" cy="200" r="15" stroke="none" fill="blue" /> 
    <rect id="rect" x="100" y="100" height="30" width="30" stroke="none" fill="red" /> 
</svg> 
<button id="button">Animate</button>

JavaScript:

document.getElementById("button").addEventListener("click", function() { 
    var circle = document.getElementById("circle"); 
    var cx = 50 + Math.round(Math.random() * 300); 
    var cy = 50 + Math.round(Math.random() * 300); 
    // using 'setAttribute' 
    circle.setAttribute("cx", cx); 
    circle.setAttribute("cy", cy); 

    var rect = document.getElementById("rect"); 
    var x = 50 + Math.round(Math.random() * 300); 
    var y = 50 + Math.round(Math.random() * 300); 
    // using 'setAttributeNS' 
    rect.setAttributeNS(null, "x", x); 
    rect.setAttributeNS(null, "y", y); 
}, false);

CSS:

circle, rect { 
    -webkit-transition: all 0.7s ease-in-out; 
    -moz-transition: all 0.7s ease-in-out; 
    transition: all 0.7s ease-in-out; 
}

Вот полный JSFiddle: http://jsfiddle.net/kkhvzyjq/

В Chrome это прекрасно работает. Однако в Safari и Firefox, когда применяются новые атрибуты (перемещение фигур), нет перехода/анимации.

Есть ли способ сделать это, что работает в этих браузерах?

источник

2015-06-23 mattstuehler

делать все это в SMIL –

@RobertLongson - Я пытался, но не мог получить, что Работа. В частности - если бы я добавил, например, два элемента 'animation' в' circle' и использовал JavaScript для изменения атрибутов 'from' и' to', это не сработало. (I.e., анимация не возобновлялась при каждом изменении атрибутов). Я также попытался удалить старые элементы анимации и добавить новые с новыми атрибутами 'from' и' to', но это тоже не сработало. Другими словами, я мог бы получать анимацию SMIL только тогда, когда она добавляется во время работы автора, а не динамически изменена во время выполнения. – mattstuehler

Вы бы этого не сделали, вы только начали анимацию onclick –

Safari и Firefox не изменяют изменения в позиционных атрибутах.

Свойство CSS transform работает лучше для этого:

http://jsfiddle.net/kkhvzyjq/7/

document.getElementById("button").addEventListener("click", function() { 
 
    var circle = document.getElementById("circle"); 
 
    var cx = 50 + Math.round(Math.random() * 300); 
 
    var cy = 50 + Math.round(Math.random() * 300); 
 
    circle.style.transform = "translate(" + cx + "px," + cy + "px)"; 
 

 
    var rect = document.getElementById("rect"); 
 
    var x = 50 + Math.round(Math.random() * 300); 
 
    var y = 50 + Math.round(Math.random() * 300); 
 
    rect.style.transform = "translate(" + x + "px," + y + "px)"; 
 
}, false);

circle, 
 
rect { 
 
    -webkit-transition: all 0.7s ease-in-out; 
 
    -moz-transition: all 0.7s ease-in-out; 
 
    transition: all 0.7s ease-in-out; 
 
}

<svg width="400" height="400"> 
 
    <circle id="circle" r="10" stroke="none" fill="blue" style="transform:translate(200px,200px);" /> 
 
    <rect id="rect" height="10" width="10" stroke="none" fill="red" style="transform:translate(100px,100px);" /> 
 
</svg> 
 
<button id="button">Animate</button>

источник

2015-09-15 20:19:21 user2570380

Использование переходов CSS для анимации динамических атрибутов SVG

ответ

Смежные вопросы