| <html> |
| <head> |
| <style type="text/css"> |
| .cls1 { |
| stroke: black; |
| fill: rgb(0,128,255); |
| stroke-width: 1; |
| } |
| </style> |
| |
| <script type="text/javascript"> |
| function setup() { |
| var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); |
| svg.width.baseVal.valueAsString = "400px"; |
| svg.height.baseVal.valueAsString = "400px"; |
| svg.viewBox.baseVal.x = 0; |
| svg.viewBox.baseVal.y = 0; |
| svg.viewBox.baseVal.width = 200; |
| svg.viewBox.baseVal.height = 90; |
| var ellipse1 = document.createElementNS("http://www.w3.org/2000/svg", "ellipse"); |
| ellipse1.cx.baseVal.value = 50; |
| ellipse1.cy.baseVal.value = 50; |
| ellipse1.rx.baseVal.value = 30; |
| ellipse1.ry.baseVal.value = 10; |
| ellipse1.style.setProperty("stroke", "black", ""); |
| ellipse1.style.setProperty("fill", "red", ""); |
| var ellipse2 = ellipse1.cloneNode(true); |
| ellipse2.cx.baseVal.value = 100; |
| |
| var drawing = document.getElementById("drawing"); |
| svg.appendChild(ellipse1); |
| svg.appendChild(ellipse2); |
| drawing.appendChild(svg); |
| } |
| </script> |
| </head> |
| <body onload="setup()"> |
| <p>Here is an html paragraph. And below is a svg drawing. You should see two ellipses.</p> |
| <div id="drawing"/> |
| </body> |
| </html> |
