i attempting have onclick event in clicking inside of box places svg circle @ coordinates of mouse pointer.
while very basic, have managed onclick event working though cannot seem circle summon @ mouse coordinates. instead, brought in top left of box if has been given different coordinates.
any assistance (with explanation possible) appreciated. still new.
the code have been working follows:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>test code</title> <script> var svgns = "http://www.w3.org/2000/svg"; function showcoords() { var cx = event.clientx; var sx = event.screenx; var cy = event.clienty; var sy = event.screeny; var svgx = cx; var svgy = cy; } function createcircle() { var mycircle = document.createelementns(svgns,"circle"); mycircle.setattributens(null,"id","mycircle"); mycircle.setattributens(null,"cx","svgx"); mycircle.setattributens(null,"cy","svgy"); mycircle.setattributens(null,"r",20); mycircle.setattributens(null,"fill","black"); mycircle.setattributens(null,"stroke","none"); document.getelementbyid("mysvg").appendchild(mycircle); } </script> </head> <body> <div onclick="createcircle()"> <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="200" style="border:1px solid #000000;"> </svg> <br> <p id="demo"></p> </div> </body> </html>
the lines set circle centre wrong. should read:
mycircle.setattributens(null,"cx", svgx); mycircle.setattributens(null,"cy", svgy); ie. remove quotes on variables.
