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: [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/
