的setInterval添加多個SVG元素，x位置相對

Question

雲：

<g id="clouds" > 
     <ellipse x="0" y="0" cx="100" cy="100" rx="30" ry="20" fill="white"/> 
     <ellipse x="0" y="0" cx="120" cy="80" rx="30" ry="20" fill="white"/> 
     <ellipse x="0" y="0" cx="130" cy="110" rx="30" ry="20" fill="white"/> 
     <ellipse x="0" y="0" cx="160" cy="100" rx="30" ry="20" fill="white"/> 
     <animateTransform attributeName="transform" 
         attributeType="XML" 
         type="translate" 
         from="0,0" 
         to="6000,0" 
         dur="30s" 
         repeatCount="indefinite"/> 
    </g> 

及以下是JavaScript：

var svg = document.getElementsByTagName('svg')[0]; 
    var xlinkns = "http://www.w3.org/1999/xlink"; 
     function loadClouds(){ 
     setInterval(function(){ 
      var y = (Math.random()*1000)+200; 
      var use = document.createElementNS("http://www.w3.org/2000/svg", 'use'); 
      use.setAttributeNS(xlinkns, "href", "#clouds"); 
      use.setAttribute("transform", "scale(0.2,0.2)"); 
      use.setAttribute("x", 0); 
      use.setAttribute("y", y); 
      svg.appendChild(use); 
     }, 1000); 
    } 

如何，我叫它：

//Clouds 
<script type="text/javascript"><![CDATA[ 
    loadClouds(); 
]]></script> 

每次一雲創建它使用先前創建的雲的x作爲起點而不是從0開始。

Answer 1

「使用」可能是有點棘手的時候，但是你需要的可能是

anim.beginElement(); 

。這裏是工作示例：

var svg = document.getElementsByTagName('svg')[0]; 
 
    var xlinkns = "http://www.w3.org/1999/xlink"; 
 
     function loadClouds(){ 
 
      var t0 = Date.now() 
 
     setInterval(function(){ 
 
      var t = Date.now()-t0; 
 
      var y = Math.floor((Math.random()*1000))-100; 
 
      var use = document.createElementNS("http://www.w3.org/2000/svg", 'use'); 
 
      use.setAttributeNS(xlinkns, "href", "#clouds"); 
 
      //use.setAttribute("transform", ""); 
 
      use.setAttribute("transform", "scale(0.2,0.2)"); 
 
      
 
      use.setAttribute("x",0); 
 
      //use.setAttribute("x", t*-0.2); 
 
      use.setAttribute("y", y); 
 
      //use.transform.animVal[0].matrix.a = Math.random() 
 
      
 
      var anim = svg.ownerDocument.createElementNS("http://www.w3.org/2000/svg", 'animateTransform'); 
 
      anim.setAttributeNS(null,'attributeName','transform') 
 
      anim.setAttributeNS(null,'attributeType','XML') 
 
      anim.setAttributeNS(null,'type','translate') 
 
      anim.setAttributeNS(null,'from',"0 0") 
 
      anim.setAttributeNS(null,'to',"6000 0") 
 
      anim.setAttributeNS(null,'dur',"30s") 
 
      anim.setAttributeNS(null,'additive','sum') 
 
      anim.setAttributeNS(null,'repeatCount',"indefinite") 
 
      use.appendChild(anim); 
 
      svg.appendChild(use); 
 
      anim.beginElement(); 
 

 
     }, 1000); 
 
    } 
 

 
loadClouds();

body { 
 
    background: blue 
 
}

<svg> 
 
    <g id="clouds"> 
 
     <ellipse x="0" y="0" cx="100" cy="100" rx="30" ry="20" fill="white"/> 
 
     <ellipse x="0" y="0" cx="120" cy="80" rx="30" ry="20" fill="white"/> 
 
     <ellipse x="0" y="0" cx="130" cy="110" rx="30" ry="20" fill="white"/> 
 
     <ellipse x="0" y="0" cx="160" cy="100" rx="30" ry="20" fill="white"/> 
 
     
 
    </g> 
 
</svg>

當然，還有很多工作要做，但它應該幫助你前進。