Hi Aron, just change the input type to "button", cause "submit" will reload the page. Yannick
----- Mail original ----- De: "aronsta" <[email protected]> À: [email protected] Envoyé: Vendredi 13 Janvier 2012 10:39:17 Objet: [svg-developers] SVG in HTML5 Hello everyone! I'm new to SVG and web design in general and I am testing out SVG in HTML5. I came up with a tutorial that I can't seem to get working, I was wondering if someone here could help me troubleshoot it. The script is supposed to draw out a rectangle based on two user inputs (width, height) from an HTML form. It seems to be working in Chrome, it will draw the rectangle, but then disappears a second after the submit button is pressed. Would anyone recommend a different approach to the problem? Thanks in advance! Aron <!DOCTYPE html> <html> <head> </head> <body> <form> Input Rectangle Width Here:<input type="text" name="width" id="w"/><br /> Input Rectangle Height Here:<input type="text" name="height" id="h"/><br /> <input type="submit" value="Draw Rectangle" onClick="createRect()"/> </form> <svg> <script> <![CDATA[ var svgNS = " http://www.w3.org/2000/svg "; var xlinkNS = " http://www.w3.org/1999/xlink "; function createRect(){ var newRect = document.createElementNS(svgNS,"rect"); var xx = document.getElementById("w").value; var yy = document.getElementById("h").value; newRect.setAttributeNS(null,"width",xx); newRect.setAttributeNS(null,"height",yy); newRect.setAttributeNS(null,"fill-opacity",1); newRect.setAttributeNS(null,"stroke-width",1); newRect.setAttributeNS(null,"astroke-opacity",1); newRect.setAttributeNS(null,"fill","white"); newRect.setAttributeNS(null,"stroke","black"); document.getElementById("firstGroup").appendChild(newRect); }; ]]> </script> <g id="firstGroup"> <rect x="100" y="100" /> </g> </svg> </body> </html> ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
