使用CSS过渡为动态SVG属性设置动画

I'm trying to animate the attributes of various SVG shapes using JavaScript and CSS transitions.

我正在尝试使用JavaScript和CSS过渡动画各种SVG形状的属性。

For example:

例如：

HTML:

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:

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:

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;
}

Here's a complete JSFiddle: http://jsfiddle.net/kkhvzyjq/

这是一个完整的JSFiddle：http：//jsfiddle.net/kkhvzyjq/

In Chrome, this works beautifully. However, in Safari and Firefox, while the new attributes are applied (the shapes move), there's no transition/animation.

在Chrome中，这非常有效。但是，在Safari和Firefox中，当应用新属性（形状移动）时，没有过渡/动画。

Is there a way to do this that works in these browsers?

有没有办法在这些浏览器中运行？

1 个解决方案

#1

Safari and Firefox do not transition changes in the position attributes.

Safari和Firefox不会转换位置属性的更改。

The CSS property transform works better for that:

CSS属性转换更适合：

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>

#1