Some of my students have started turning in projects in which they use SVG inline in HTML5. So I figured it was time for me to figure something out about it.
Based on this little thing [1] that works in all browsers, I decided just to put the SVG inside an HTML container to see what I could see. My limited experiment tells me I don't know how this is supposed to work, so am hoping someone can help me out. Following is my code (it's pretty brief so I just included it). But here are the problems: 1. It only shows the SVG in Chrome and Firefox. Is there some magic namespace I should use to get it to work in Opera and Safari? Haven't tried IE9 (sorry) 2. The first alert() shows that the nodeName of S is indeed SVG -- a good thing! However, the second alert() does not appear (and I even tried contentDocument instead of getSVGDocument, remembering Firefox's odd affection for that construct). How would one get access to the SVG DOM? 3. If I use "remove()" instead of "remove(evt)" then the first alert inside that function is reached. Otherwise the processing doesn't get that far. So how can one identify the target of the evt in a way that actually works. I tried a half dozen random guesses as to what might work. Is this a bug in HTML5? or is inline SVG not supposed to be scripted? cheers David -------------------------------------- <html><script> function startup(){ S=document.getElementById("SVG") alert(S.nodeName) SVGDoc=S.getSVGDocument() alert(SVGDoc.documentElement.nodeName) SVGDoc.documentElement.setAttribute("onclick","remove(evt)") } xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" function removeIt(evt){ alert() if (evt.target.nodeName=="rect") add(evt) else document.documentElement.removeChild(evt.target) } function add(evt){ var C=document.createElementNS(xmlns,"circle") C.setAttributeNS(null, "r", 50) C.setAttributeNS(null, "cx", evt.clientX) C.setAttributeNS(null, "cy", evt.clientY) document.documentElement.appendChild(C) } </script> Hello there! <svg xmlns="http://www.w3.org/2000/svg" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" id="SVG" onload="startup()" > <rect width="100%" height="100%" fill="white" onclick="removeIt(evt)"/> <circle r="50" onclick="removeIt(evt)"/> <text font-size="12" x="50" y="20" onclick="removeIt(evt)">Click something to remove it</text> <text font-size="12" x="50" y="80" onclick="removeIt(evt)">Click nothing to add something</text> </svg></html> [1] http://srufaculty.sru.edu/david.dailey/svg/simpleTemplate.svg [Non-text portions of this message have been removed] ------------------------------------ ----- To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -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: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com <*> To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/