dom - creating circles with svg and javascript -
(updated) i'm having issues regarding svg , javascript. want create series of circles on top of 1 another, radius (r) values increasing 1 each time loop goes round, creates sort of pattern. here have far(for loop values forum post, rather while loop execute 10 times) -
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>dynamic svg!</title> </head> <defs> <svg height="10000" width="10000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle id="cir1" cx="300" cy="300" r="40" stroke="yellow" stroke-width="" fill="none"/> </svg> </defs> <script> var svgns = "http://www.w3.org/2000/svg"; (var x = 0; x < 5000; x += 50) { (var y = 0; y < 3000; y += 50) { var circle = document.createelementns(svgns, 'circle'); circle.setattributens(null, 'x', x); circle.setattributens(null, 'y', y); circle.setattributens(null, 'height', '50'); circle.setattributens(null, 'width', '50'); document.getelementbyid('cir1').appendchild(circle); } } </script> <body> </body> </html> any out there? thanks.
ok, is, had fix in order code working:
- you append circle element, should append svg-container. circle element has no child elements.
- you did not set styles circles, transparent.
- the coordinates in circle element called
cx,cyinstead ofx,y. - the
<defs>element should child of<svg>element. within wont rendered.
javascript
var svgns = "http://www.w3.org/2000/svg", container = document.getelementbyid( 'cont' ); (var x = 0; x < 500; x += 50) { (var y = 0; y < 300; y += 50) { var circle = document.createelementns(svgns, 'circle'); circle.setattributens(null, 'cx', x); circle.setattributens(null, 'cy', y); circle.setattributens(null, 'r', 50); circle.setattributens(null, 'style', 'fill: none; stroke: blue; stroke-width: 1px;' ); cont.appendchild(circle); } } html
<svg id="cont" height="1000" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle id="cir1" cx="300" cy="300" r="40" stroke="yellow" stroke-width="" fill="none" /> </svg> i adjusted sizes mere test, quite big.
Comments
Post a Comment