setInterval l'ajout de plusieurs éléments svg, la relativité de position x

Question

Nuages:

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

Et ci-dessous est le 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); 
    } 

Comment je l'appeler:

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

Everytime une le nuage est créé en utilisant le x du nuage précédemment créé comme point de départ au lieu de commencer à 0.

Answer 1

peut-être peu difficile parfois « utilisation », mais ce dont vous avez besoin est probablement

anim.beginElement(); 

. Voici exemple de travail:

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>

Certes, il y a beaucoup à faire, mais il devrait vous aider à aller de l'avant.