| <?xml version="1.0" encoding="utf-8" standalone="no"?> |
| <svg onload="init(evt)" width="500" height="500" zoomAndPan="disable" |
| xmlns="http://www.w3.org/2000/svg" |
| xmlns:xlink="http://www.w3.org/1999/xlink"> |
| <script type="text/ecmascript"><![CDATA[ |
| var svgns = "http://www.w3.org/2000/svg"; |
| |
| var width = 6; |
| var height = 6; |
| var r = 15; |
| var offset = 30; |
| var spacing = 20; |
| var elems = []; |
| var midX = (500 - ((width-1) * spacing)) / 2; |
| var midY = (470 - ((height-1) * spacing)) / 2; |
| var world; |
| |
| function init(e) { |
| if ( window.svgDocument == null ) |
| svgDocument = e.target.ownerDocument; |
| |
| world = svgDocument.getElementById("world"); |
| world.setAttributeNS( |
| null, |
| "transform", |
| "translate(" + midX + "," + midY + ")" |
| ); |
| |
| createElements(); |
| } |
| |
| function createElements() { |
| for ( var y = 0; y < height; y++ ) { |
| for ( var x = 0; x < width; x++ ) { |
| createElement(x, y); |
| } |
| } |
| } |
| |
| function createElement(x, y) { |
| var elem = svgDocument.createElementNS(svgns, "circle"); |
| var cx = x * spacing; |
| var cy = y * spacing; |
| var translate = "translate(" + cx + "," + cy + ")"; |
| |
| elem.setAttributeNS(null, "cx", -offset); |
| elem.setAttributeNS(null, "r", r); |
| elem.setAttributeNS(null, "transform", translate); |
| |
| // store shape for later manipulation |
| elems.push([elem, cx, cy]); |
| |
| // add shape to world |
| world.appendChild(elem); |
| } |
| |
| function update(e) { |
| var length = elems.length; |
| |
| for ( var i = 0; i < length; i++ ) { |
| var elem = elems[i]; |
| var dx = (e.clientX - elem[1]) - midX; |
| var dy = (e.clientY - elem[2]) - midY; |
| var angle = 180 * Math.atan2(dy, dx) / Math.PI; |
| var rotate = "rotate(" + angle + ")"; |
| var translate = "translate(" + elem[1] + "," + elem[2] + ")"; |
| |
| elem[0].setAttributeNS( |
| null, |
| "transform", |
| translate + " " + rotate |
| ); |
| } |
| } |
| |
| function changeColor(e) { |
| var color = e.target.getAttributeNS(null, "stroke"); |
| |
| world.setAttributeNS(null, "stroke", color); |
| world.setAttributeNS(null, "fill", color); |
| } |
| ]]></script> |
| <rect x="-16384" y="-16384" width="32767" height="32767" |
| fill="none" pointer-events="fill" onmousemove="update(evt)"/> |
| <rect x="10" y="10" width="478" height="478" rx="5" ry="5" |
| fill="none" stroke="grey" stroke-width="2"/> |
| <g id="world" pointer-events="none" |
| stroke="rgb(192,124,158)" fill="rgb(192,124,158)" fill-opacity="0.5"/> |
| |
| <rect x="10" y="460" width="478" height="29" rx="5" ry="5" |
| stroke="grey" stroke-width="2" fill="rgb(230,230,230)"/> |
| <g fill-opacity="0.5" onclick="changeColor(evt)"> |
| <circle cx="25" cy="475" r="10" stroke="rgb(192,124,158)" fill="rgb(192,124,158)"/> |
| <circle cx="50" cy="475" r="10" stroke="rgb(100,149,5)" fill="rgb(100,149,5)"/> |
| <circle cx="75" cy="475" r="10" stroke="rgb(8,168,128)" fill="rgb(8,168,128)"/> |
| <circle cx="100" cy="475" r="10" stroke="rgb(240,96,18)" fill="rgb(240,96,18)"/> |
| <circle cx="125" cy="475" r="10" stroke="rgb(73,122,247)" fill="rgb(73,122,247)"/> |
| <circle cx="150" cy="475" r="10" stroke="rgb(240,203,0)" fill="rgb(240,203,0)"/> |
| <circle cx="175" cy="475" r="10" stroke="rgb(170,78,247)" fill="rgb(170,78,247)"/> |
| </g> |
| |
| <text x="485" y="485" font-size="10px" font-rendering="optimizeLegibility" fill="grey" text-anchor="end" pointer-events="none">Copyright 2004, Kevin Lindsey</text> |
| </svg> |