更新 SVG 动画

Question

我的代码向左移动了一个形状，并在 2 秒内淡出并在 1 秒后重复一切

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="636px" height="155px" version="1.1">
 <g id="canvas" transform="translate(0.5,0.5)">  
 </g>
</svg>

<script language="javascript">

 var svgNS = "http://www.w3.org/2000/svg";  
 var canvas = document.querySelector('#canvas');
 function svgElement(name, attributes) {
  var element = document.createElementNS(svgNS, name); //to create a circle, for rectangle use rectangle
  for (key in attributes)
   element.setAttribute(key, attributes[key]);
  return canvas.appendChild(element);
 }
 function render() {
  while (canvas.firstChild) canvas.removeChild(canvas.firstChild);
  svgElement('rect', {x:x, y:"20", width:"100",height:"100",style:"fill:blue"})
 }
 var x = 100
 render()
 var wait = 0
 function clock() {
  if (wait > 0) {
   wait -= 1
   if (wait == 0)
    x = 100
  } else {
   x -= 10
   if (x < 1) {
    svgElement('animate', {attributeType:"CSS", attributeName:"opacity", from:1, to:0, dur:"2s", fill:"freeze"})
    wait = 30
   } else
    render()
  }
  
 }
 
 setInterval(clock, 100)
</script>

问题是不透明度在第二次迭代时立即消失。广场立即消失。

Answer 1

有一个动画时间轴在添加第一个动画时开始运行ning 然后继续。所以你的第一个动画运行s 在时间 0。

对于后续动画，时间线已运行过去 0，因此当它们从时间 0 开始（没有指定开始）时，它们会立即发生。

一个解决方案（如下所示）是重置动画时间轴。
另一个是计算动画的正确开始值 - 例如，您可以通过调用 canvas.parentNode.getCurrentTime 来获取它。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="636px" height="155px" version="1.1">
 <g id="canvas" transform="translate(0.5,0.5)">  
 </g>
</svg>

<script language="javascript">

 var svgNS = "http://www.w3.org/2000/svg";  
 var canvas = document.querySelector('#canvas');
 function svgElement(name, attributes) {
  var element = document.createElementNS(svgNS, name); //to create a circle, for rectangle use rectangle
  for (key in attributes)
   element.setAttribute(key, attributes[key]);
  return canvas.appendChild(element);
 }
 function render() {
  while (canvas.firstChild) canvas.removeChild(canvas.firstChild);
  svgElement('rect', {x:x, y:"20", width:"100",height:"100",style:"fill:blue"})
 }
 var x = 100
    var begin = 0
 render()
 var wait = 0
 function clock() {
  if (wait > 0) {
   wait -= 1
   if (wait == 0)
    x = 100
  } else {
   x -= 10
   if (x < 1) {
    svgElement('animate', {attributeType:"CSS", attributeName:"opacity", from:1, to:0, dur:"2s", fill:"freeze", begin:begin})
    wait = 30
    canvas.parentNode.setCurrentTime(0);
   } else
    render()
  }
  
 }
 
 setInterval(clock, 100)
</script>

更新 SVG 动画

Updating SVG animations

javascript

animation

svg

dom

dynamic