Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Well that's because in your javascript the root element get changed if you save in html file. </p> <p>Just to test it, you can type <code>document.documentElement</code> on browser console, then if you save file as SVG the root element refers to SVG element whereas if you save it as html then it refers to HTML element. </p> <p>So the solution is add a <strong>id</strong> to SVG element and access SVG element through id. Here is the updated working code.</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;svg xmlns="http://www.w3.org/2000/svg" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgbeast" &gt; &lt;script&gt;&lt;![CDATA[ var xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" Root=document.getElementById("svgbeast") standardize(Root) function standardize(R){ var Attr={ "onmouseup":"add(evt)", "onmousedown":"grab(evt)", "onmousemove":null, "onmouseover":"hilight(evt)", "onmouseout":"hilight(evt)" } assignAttr(R,Attr) } function hilight(evt){ var T=evt.target if (T.nodeName=="rect") return if (evt.type=="mouseover") T.setAttributeNS(null,"stroke-opacity",1) else T.setAttributeNS(null,"stroke-opacity",.5) } function add(evt){ if (evt.target.nodeName!="rect") return var C=document.createElementNS(xmlns,"circle") var stroke=Color() var rad=10+Math.random()*50 var Attr={ r:rad, cx:evt.clientX, cy:evt.clientY, "fill": Color(), "fill-opacity":.75, "stroke": stroke, "stroke-opacity":.5, "id":stroke, "stroke-width":10+Math.random()*(55-rad) } assignAttr(C,Attr) Root.appendChild(C) } function grab(evt){ var O=evt.target if (evt.target.nodeName=="rect") return var Attr={ "onmousemove":"slide(evt,'"+O.id+"')", "onmouseup":"standardize(Root)" } assignAttr(Root,Attr) } function slide(evt,id){ var o=document.getElementById(id) var c=""; if (o.nodeName=="circle") c="c" o.setAttributeNS(null, c+"x", evt.clientX) o.setAttributeNS(null, c+"y", evt.clientY) } function assignAttr(O,A){ for (i in A) O.setAttributeNS(null,i, A[i]) } function Color(){ return "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")" } ]]&gt; &lt;/script&gt; &lt;rect width="100%" height="100%" fill="white"/&gt; &lt;text font-size="12pt" x="50" y="20" id="t1"&gt;Click something to move it&lt;/text&gt; &lt;text font-size="12pt" x="80" y="40" id="t2"&gt;Click nothing to add something&lt;/text&gt; &lt;/svg&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Good Luck!!!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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