| commit | author | age | ||
| 0e5441 | 1 | <?xml version="1.0"?> |
| CM | 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" |
| 3 | "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | |
| 4 | <svg xmlns="http://www.w3.org/2000/svg" | |
| 5 | xmlns:xlink="http://www.w3.org/1999/xlink" | |
| 6 | id="canvas" | |
| 7 | width="2000" | |
| 8 | height="2000" | |
| 9 | onload="init()"> | |
| 10 | ||
| 11 | <style type="text/css"> | |
| 12 | .ellipse | |
| 13 | { | |
| 14 | stroke: red; | |
| 15 | stroke-width: 2; | |
| 16 | fill: blue; | |
| 17 | fill-opacity: 0.1; | |
| 18 | } | |
| 19 | ||
| 20 | .axes | |
| 21 | { | |
| 22 | stroke: blue; | |
| 23 | stroke-width: 1; | |
| 24 | } | |
| 25 | </style> | |
| 26 | ||
| 27 | <script> | |
| 28 | <![CDATA[ | |
| 29 | var COLS = 4; | |
| 30 | var ROWS = 4; | |
| 31 | var RX = 80; | |
| 32 | var RY = 30; | |
| 33 | ||
| 34 | function init() | |
| 35 | { | |
| 36 | var canvas = document.getElementById("canvas"); | |
| 37 | ||
| 38 | var angleStep = 360.0/(COLS*ROWS); | |
| 39 | var spacing = 2*Math.max(RX, RY)+10; | |
| 40 | for (var c = 0; c < COLS; ++c) { | |
| 41 | for (var r = 0; r < ROWS; ++r) { | |
| 42 | var ellipse = createEllipse((c+ COLS*r)*angleStep, spacing*(c+0.5), spacing*(r+0.5), RX, RY); | |
| 43 | canvas.appendChild(ellipse); | |
| 44 | } | |
| 45 | } | |
| 46 | } | |
| 47 | ||
| 48 | function createEllipse(phi, x, y, rx, ry) | |
| 49 | { | |
| 50 | var degPerRad = Math.PI/180.0; | |
| 51 | var e1x = rx*Math.cos(phi*degPerRad); | |
| 52 | var e1y = rx*Math.sin(phi*degPerRad); | |
| 53 | var e2x = ry*Math.cos((phi+90)*degPerRad); | |
| 54 | var e2y = ry*Math.sin((phi+90)*degPerRad); | |
| 55 | ||
| 56 | var axes = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 57 | axes.setAttribute("class", "axes"); | |
| 58 | axes.setAttribute("d", "M"+x+","+y+" l"+e1x+","+e1y+"M"+x+","+y+" l"+e2x+","+e2y); | |
| 59 | var ellipse = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| 60 | ellipse.setAttribute("class", "ellipse"); | |
| 61 | ellipse.setAttribute("d", "M" + (x+e1x) + "," + (y+e1y) + | |
| 62 | "A" + rx + "," + ry + " " + phi + " 0,1 " + (x+e2x) + "," + (y+e2y) + | |
| 63 | "A" + rx + "," + ry + " " + phi + " 1,1 " + (x+e1x) + "," + (y+e1y) +"z"); | |
| 64 | ||
| 65 | var group = document.createElementNS("http://www.w3.org/2000/svg", "g"); | |
| 66 | group.appendChild(axes); | |
| 67 | group.appendChild(ellipse); | |
| 68 | return group; | |
| 69 | } | |
| 70 | ||
| 71 | ]]> | |
| 72 | </script> | |
| 73 | </svg> | |
