| <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 SHOW_BUG = true; |
| |
| var SVGNS = 'http://www.w3.org/2000/svg'; |
| var svg = document.createElementNS(SVGNS, "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 path1 = document.createElementNS(SVGNS, "path"); |
| if (SHOW_BUG) { |
| path1.pathSegList.appendItem(path1.createSVGPathSegMovetoAbs(10, 10)); |
| path1.pathSegList.appendItem(path1.createSVGPathSegLinetoAbs(25, 15)); |
| path1.pathSegList.appendItem(path1.createSVGPathSegLinetoAbs(110, 75)); |
| path1.pathSegList.appendItem(path1.createSVGPathSegLinetoAbs(120, 90)); |
| path1.pathSegList.appendItem(path1.createSVGPathSegLinetoAbs(42, 42)); |
| path1.pathSegList.appendItem(path1.createSVGPathSegClosePath()); |
| } else { |
| path1.setAttributeNS(null, 'd', "M 10 10 L 25 15 L 110 75 L 120 90 L 42 42 Z"); |
| } |
| |
| path1.style.setProperty("stroke", "black", ""); |
| path1.style.setProperty("fill", "red", ""); |
| var path2 = path1.cloneNode(true); |
| path2.setAttributeNS(null, 'transform', "translate(75, 0)"); |
| |
| var drawing = document.getElementById("drawing"); |
| svg.appendChild(path1); |
| svg.appendChild(path2); |
| drawing.appendChild(svg); |
| } |
| </script> |
| </head> |
| <body onload="setup()"> |
| <p>Below is a JavaScript-generated svg drawing. You should see two red blobs: the left, a programmatically generated path and the right, its clone.</p> |
| <div id="drawing"></div> |
| </body> |
| </html> |
| |
| |
