| <html> |
| <head> |
| <script language="javascript"> |
| <!-- |
| |
| SVG_NS = 'http://www.w3.org/2000/svg'; |
| |
| function pathFromStar (radius, innerRadius, sides) { |
| var path = []; |
| for (var i = 0; i < sides * 2; ++i) { |
| var theta = Math.PI * i / sides + (Math.PI / 2); |
| var r = (i % 2) ? radius : innerRadius; |
| var x = r * Math.cos(theta); |
| var y = r * Math.sin(theta); |
| path.push((i ? 'L' : 'M'), x, y); |
| } |
| path.push('Z'); |
| return path.join(' '); |
| } |
| |
| function newSvgElement (tagName, parentNode, attrs) { |
| var node = document.createElementNS(SVG_NS, tagName); |
| if (attrs) { |
| for (var k in attrs) { |
| node.setAttribute(k, attrs[k]); |
| } |
| } |
| if (parentNode) { |
| parentNode.appendChild(node); |
| } |
| return node; |
| } |
| |
| function setCenterPosition (node, x, y) { |
| node.setAttribute('transform', 'translate($1, $2)' |
| .replace('$1', x) |
| .replace('$2', y)); |
| } |
| |
| var armed = null; |
| |
| window.addEventListener('load', function () { |
| |
| var svgContainer = newSvgElement('svg', document.body); |
| svgContainer.setAttribute('width', '100%'); |
| svgContainer.setAttribute('height', '100%'); |
| var shapes = [ |
| { pos: [ 100, 100 ], size: 60, hasStroke: false }, |
| { pos: [ 250, 100 ], size: 60, hasStroke: true }, |
| { pos: [ 400, 100 ], size: 50, hasStroke: true } |
| ]; |
| svgContainer.style.WebkitSvgShadow = '5px 5px 5px red'; |
| svgContainer.style.opacity = '0.5'; |
| for (var i = 0; i < shapes.length; ++i) { |
| var shape = shapes[i]; |
| var group = newSvgElement('g', svgContainer); |
| var node = newSvgElement('path', group, { |
| d: pathFromStar(shape.size, shape.size / 2, 5), |
| fill: '#999', |
| stroke: 'black', |
| 'stroke-width': 10, |
| }); |
| setCenterPosition(node, shape.pos[0], shape.pos[1]); |
| if (shapes[i].hasStroke) { |
| node.setAttribute('stroke-dasharray', 20); |
| } |
| node.addEventListener('mousedown', function (ev) { |
| var e = ev || event; |
| armed = { node: e.target || e.srcElement }; |
| }); |
| node.addEventListener('mouseup', function () { |
| armed = null; |
| }); |
| } |
| window.addEventListener('mousemove', function (ev) { |
| if (armed) { |
| var e = ev || event; |
| setCenterPosition(armed.node, e.clientX, e.clientY); |
| } |
| }); |
| }); |
| |
| //--> |
| </script> |
| </head> |
| <body> |
| |
| </body> |
| </html> |
