Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can we edit the SVG format file and save as .html file?
    primarykey
    data
    text
    <p>I have this SVG code which I am trying to use in html 5, but i it's not running, how to use this SVG code in html 5? The code is fully running when the file is saved in SVG format. But how this code can be saved in html 5 form?</p> <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" &gt; &lt;script&gt;&lt;![CDATA[ var xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" Root=document.documentElement 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; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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