http://snippets.dzone.com/posts Sun, 18 May 2008 00:05:59 GMT DZone Snippets: colours code http://snippets.dzone.com/posts/show/5268 Demonstrates creating creating and dragging circles using SVG and ECMAScript. <br /> <br />Tested on Firefox 3 beta 4. <br /> <br />file: makeDragDrop.svg <br /><code> <br /><svg xmlns="http://www.w3.org/2000/svg" width="100%" <br /> xmlns:xlink="http://www.w3.org/1999/xlink" > <br /><script><![CDATA[ <br />var xmlns="http://www.w3.org/2000/svg" <br /> xlink="http://www.w3.org/1999/xlink" <br /> Root=document.documentElement <br />standardize(Root) <br /> <br />function standardize(R){ <br /> var Attr={ <br /> "onmouseup":"add(evt)", <br /> "onmousedown":"grab(evt)", <br /> "onmousemove":null, <br /> "onmouseover":"hilight(evt)", <br /> "onmouseout":"hilight(evt)" <br /> } <br /> assignAttr(R,Attr) <br />} <br />function hilight(evt){ <br /> var T=evt.target <br /> if (T.nodeName=="rect") return <br /> if (evt.type=="mouseover") T.setAttributeNS(null,"stroke-opacity",1) <br /> else T.setAttributeNS(null,"stroke-opacity",.5) <br />} <br />function add(evt){ <br /> if (evt.target.nodeName!="rect") return <br /> var C=document.createElementNS(xmlns,"circle") <br /> var stroke=Color() <br /> var rad=10+Math.random()*50 <br /> var Attr={ <br /> r:rad, <br /> cx:evt.clientX, <br /> cy:evt.clientY, <br /> "fill": Color(), <br /> "fill-opacity":.75, <br /> "stroke": stroke, <br /> "stroke-opacity":.5, <br /> "id":stroke, <br /> "stroke-width":10+Math.random()*(55-rad) <br /> } <br /> assignAttr(C,Attr) <br /> Root.appendChild(C) <br />} <br />function grab(evt){ <br /> var O=evt.target <br /> if (evt.target.nodeName=="rect") return <br /> var Attr={ <br /> "onmousemove":"slide(evt,'"+O.id+"')", <br /> "onmouseup":"standardize(Root)" <br /> } <br /> assignAttr(Root,Attr) <br />} <br />function slide(evt,id){ <br /> var o=document.getElementById(id) <br /> var c=""; if (o.nodeName=="circle") c="c" <br /> o.setAttributeNS(null, c+"x", evt.clientX) <br /> o.setAttributeNS(null, c+"y", evt.clientY) <br />} <br />function assignAttr(O,A){ <br /> for (i in A) O.setAttributeNS(null,i, A[i]) <br />} <br />function Color(){ <br /> return "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")" <br />} <br />]]> <br /></script> <br /><rect width="100%" height="100%" fill="white"/> <br /><text font-size="12pt" x="50" y="20" id="t1">Click something to move it</text> <br /><text font-size="12pt" x="80" y="40" id="t2">Click nothing to add something</text> <br /></svg> <br /></code> <br />Source file copied from <a href="http://srufaculty.sru.edu/david.dailey/svg/makeDragDrop.svg">http://srufaculty.sru.edu/david.dailey/svg/makeDragDrop.svg</a> <br /> Sat, 22 Mar 2008 00:30:36 GMT http://snippets.dzone.com/posts/show/5268 jrobertson (James Robertson)