Note that there are some explanatory texts on larger screens.

plurals
  1. POsimple svg situation
    text
    copied!<p><em>This question is solved thanks Blender.</em></p> <p>This is driving me insane. Its not hard but i can't get it. If i remove the parameter i from the method call and in method then it will fly apart as I want but only one piece. If i leave it in then i have to click multiple times to get go apart. Also posS has nothing to do with anything. But if I uncomment it then the first chunk won't fly apart. I want all the pieces to fly apart. Sorry for ugly code its my first time with this.</p> <p>EDIT: now posS is not exploding while its nearly based on posT.</p> <pre><code> &lt;?xml version="1.0" standalone="no"?&gt; &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt; &lt;svg viewBox='0 0 100 100' version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onclick='startxplode()'&gt; &lt;style type="text/css"&gt; .none { fill: none; } .logo { fill: #CFA10A; } .edge { stroke: white; stroke-width: .5; } .test { fill: blue; opacity: .3; } &lt;/style&gt; &lt;script&gt; &lt;![CDATA[ var min = -45; var max = 45; var posT = new Array(4); for (i = 0; i &lt; 4; i++) {posT[i] = {x:0, y:0};} var st = new Array(4); for (i = 0; i &lt; 4; i++) {st[i] = 1;} var posS = new Array(9); for (i = 0; i &lt; 9; i++) {posT[i] = {x:0, y:0};} var ss = new Array(9); for (i = 0; i &lt; 9; i++) {ss[i] = 1;} var deg = new Array(9); for (i = 0; i &lt; 9; i++) {deg[i] = 0;} function xplode() { for (i = 0; i &lt; 4; i++) {runT(i);} for (i = 0; i &lt; 9; i++) {runS(i);} } function startxplode() { setInterval(xplode, 40); } function runT(i) { if (i==0 || i==2){if (st[i]&gt;0) {st[i]+=.02;}} else {st[i]+=.1;} if (i&lt;2) { posT[i].x -= .4; if (i==0){posT[i].y -= .4;} else posT[i].y -= .4;} else{ posT[i].x += .4; if (i==2){posT[i].y -= .4;} else posT[i].y += .4;} var projectile = document.getElementById('t'+i); projectile.setAttributeNS(null, 'transform', 'translate('+posT[i].x+' '+posT[i].y+') scale('+st[i]+')'); if (posT[i].x &gt; min &amp;&amp; posT[i].x &lt; max) {setTimeout(runT, 40);} } function runS(i) { posS[i].x -= .9; posS[i].y -= 1.4; deg[i] += 1 % 360; if (ss[i] &gt; 0) ss[i] -= .03; else ss[i] += .05 var projectile = document.getElementById('s'+i); projectile.setAttributeNS(null, 'transform', 'rotate('+deg[i]+') translate('+posS[i].x+', '+posS[i].y+') scale('+ss[i]+')'); if (posS[i].x &gt; min &amp;&amp; posS[i].x &lt; max) {setTimeout(runS, 40);} } function restart() { window.location.reload(); } ]]&gt; &lt;/script&gt; &lt;g transform='translate(40 30)'&gt; &lt;polygon id='t0' class='logo edge' points='0,0, 5,0, 0,5'/&gt; &lt;polygon id='t1' class='logo edge' points='0,12, 0,17, 5,17'/&gt; &lt;polygon id='t2' class='logo edge' points='12,0, 17,0, 17,5'/&gt; &lt;polygon id='t3' class='logo edge' points='17,12, 17,17, 12,17'/&gt; &lt;/g&gt; &lt;g transform='rotate(45) translate(49.55, -7.1)'&gt; &lt;rect id='s0' class='logo edge' x='3.7' y='-8.3' height='5' width='5'/&gt; &lt;rect id='s1' class='logo edge' x='15.3' y='3.3' height='5' width='5'/&gt; &lt;rect id='s2' class='logo edge' x='3.7' y='3.3' height='5' width='5'/&gt; &lt;rect id='s3' class='logo edge' x='15.3' y='-8.3' height='5' width='5'/&gt; &lt;rect id='s4' class='logo edge' x='8.7' y='-8.3' height='5' width='6.5'/&gt; &lt;rect id='s5' class='logo edge' x='3.7' y='-3.3' height='6.5' width='5'/&gt; &lt;rect id='s6' class='logo edge' x='15.3' y='-3.3' height='6.5' width='5'/&gt; &lt;rect id='s7' class='logo edge' x='8.7' y='3.3' height='5' width='6.5'/&gt; &lt;rect id='s8' class='logo edge' x='8.7' y='-3.3' height='6.5' width='6.5'/&gt; &lt;/g&gt; &lt;/svg&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload