One more note since I have found work-arounds to most of my problems (at least
in Chrome and Firefox):
Following is the new code that duplicates most of the behavior of the original
SVG, but now inside HTML.
Basically, the coding paradigm is all HTML, and that is what confused me at
first. things like onclick="happy(evt)" typical in SVG simply seem not to work
within the HTML setting. Instead something like C.onclick=removeIt is used to
gain HTML's access to the event object. There seems to be no SVGDocument
element to which we can assign events so instead of assigning a generic event
handler to documentElement and then interrogating what has been clicked the way
one might in SVG, you apparently must peruse the DOM and assign event handlers
to all things found. Of course in the simple example below, that means new
elements all have to have that behavior assigned since they cannot inherit it
from the Root node. If instead we do assign events to the HTML documentElement
(that includes the SVG content) then the bubble up vs trickle down Reagonomics
seems to intercept events in opposite way that one would expect in SVG.
And of course mousecoordinates are a bit screwy. They are measured relative to
the SVG window, but then content is created relative to the HTML window it
seems.
Stuff that one could work around I suppose, but I guess my last question would
now be: "is this how it is supposed to be?"
cheers
David
<html><script>
function startup(){
S=document.getElementById("SVG")
for (i in S.childNodes) S.childNodes[i].onclick=removeIt
}
xmlns="http://www.w3.org/2000/svg";
xlink="http://www.w3.org/1999/xlink";
function removeIt(e){
T=e.target
if (T.nodeName=="rect") add(e.clientX,e.clientY)
else T.parentNode.removeChild(T)
}
function add(x,y){
var C=document.createElementNS(xmlns,"circle")
C.setAttributeNS(null, "r", 50)
C.setAttributeNS(null, "cx", x)
C.setAttributeNS(null, "cy", y)
C.onclick=removeIt
S.appendChild(C)
}
</script><p onclick="removeIt()">
Hello there!</p>
<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" />
<circle r="50" />
<text font-size="12" x="50" y="20" onclick="removeIt()">Click something to
remove it</text>
<text font-size="12" x="50" y="80">Click nothing to add something</text>
</svg></html>
----- Original Message -----
From: ddailey
To: [email protected]
Sent: Tuesday, February 08, 2011 5:34 PM
Subject: [svg-developers] scripting SVG in HTML (followup)
I just solved one of those problems that I wrote about in my last message:
#2 -- One apparently doesn't have a document within the SVG node -- you just
acess the elements within it as though they are childNodes. Of course that
means that a statement like
SVGDoc.documentElement.setAttribute("onclick","remove(evt)")
won't work.
Still no success, though, in identifying an SVG object that is the target of
an event.
cheers
David
[Non-text portions of this message have been removed]
[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/
