CODEWITHSUNDEEP
javascriptsvgelementsvg-animate
Roudi
Roudi

Reputation: 1319

setInterval adding multiple svg elements, x position relativity

Clouds:

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

And below is the 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);
    }

How I'm calling it:

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

Everytime a cloud is created it's using the x of the previously created cloud as a starting point instead of starting at 0.

Upvotes: 0

Views: 343

Answers (1)

Michał Sałaciński
Michał Sałaciński

Reputation: 2266

"use" might be little tricky sometimes, but what you need is probably 

anim.beginElement();

. Here is working example:

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>

Surely, there's much to do, but it should help you move forward.

Upvotes: 1

Related Questions