Re: [svg-developers] Nested defs Event Bubbling
I think you can't read the elements and attributes in the defs section with DOM, when using use elements to display them. The defs section of an svg file is not part of the DOM tree. The only thing you can access is the toolbar use element and its xlink:href=#tbFormat attribute. Jeroen lynchburgloyal schreef: I've seen posts asking questions similar to mine but I'm still not achieving the behavior that I want. Hopefully somewhere here can set me straight. I'm trying to make good reuse of some def elements. Picture this: a toolbar with three buttons - Bold, Italic, Underline. I created elements for each of the buttons and then added them to an element for the toolbar like this (pseudo): defs g id=cmdBold/ g id=cmdItal/ g id=cmdUnln/ g id=tbFormat use xlink:href=#cmdBold/ use xlink:href=#cmdItal/ use xlink:href=#cmdUnln/ /g /defs !-- toolbar -- use xlink:href=tbFormat/ So far, so good. I can treat the toolbar as a single element and my code is neat and clean. What I can't figure out how to do is respond to events for the buttons. I've tried inserting pointer-events=all in different places to see if it helps bubbling but no joy. So, given the defs/use layout above, how can I trap the bold button being clicked? Or access the bold button as a DOM element so that I can read/write its attributes? Sample or pseudo code would be great. In the meantime I will continue to RTFM. LL - To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership SPONSORED LINKS Xml format http://groups.yahoo.com/gads?t=msk=Xml+formatw1=Xml+formatw2=Svgw3=Datac=3s=35.sig=u8RdjEjLCbPTzkUjsFG_JA Svg http://groups.yahoo.com/gads?t=msk=Svgw1=Xml+formatw2=Svgw3=Datac=3s=35.sig=BrpyGiBcZ6vcQXDJ7ktaiw Data http://groups.yahoo.com/gads?t=msk=Dataw1=Xml+formatw2=Svgw3=Datac=3s=35.sig=CrK_fWaLZ-AZKa5FK8rTGA YAHOO! GROUPS LINKS * Visit your group svg-developers http://groups.yahoo.com/group/svg-developers on the web. * To unsubscribe from this group, send an email to: [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] * Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service http://docs.yahoo.com/info/terms/. Disclaimer: http://www.kuleuven.be/cwis/email_disclaimer.htm - 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/ * 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/
Re: [svg-developers] Nested defs Event Bubbling
I've spent much time trying to solve a similar issue, and have come to
the conclusion that the code below is the only way with a minimal amount
of svg text, maybe I'm wrong.
defs
g id=cmdBold/
g id=cmdItal/
g id=cmdUnln/
/defs
!-- toolbar --
g id=tbFormat
use xlink:href=#cmdBold/
use xlink:href=#cmdItal/
use xlink:href=#cmdUnln/
/g
//JS
functuion init(evt){
var buttons= svgDoc.getElementsByTagName(g);
number=buttons.length;
i=0;
while (inumber){
object=buttons.item(i);
if(object.getAttribute('id')=='tbFormat'){
object.addEventListener(click, clickEvt, false);
}
i++;
}
}
function clickEvt(evt)[
var object=evt.target;
var cat=object.getAttribute('xlink:href');
do something
}
Jeroen Vanattenhoven wrote:
I think you can't read the elements and attributes in the defs section
with DOM, when using use elements to display them. The defs section of
an svg file is not part of the DOM tree. The only thing you can access
is the toolbar use element and its xlink:href=#tbFormat attribute.
Jeroen
lynchburgloyal schreef:
I've seen posts asking questions similar to mine but I'm still not
achieving the behavior that I want. Hopefully somewhere here can set
me straight.
I'm trying to make good reuse of some def elements. Picture this: a
toolbar with three buttons - Bold, Italic, Underline. I created
elements for each of the buttons and then added them to an element for
the toolbar like this (pseudo):
defs
g id=cmdBold/
g id=cmdItal/
g id=cmdUnln/
g id=tbFormat
use xlink:href=#cmdBold/
use xlink:href=#cmdItal/
use xlink:href=#cmdUnln/
/g
/defs
!-- toolbar --
use xlink:href=tbFormat/
So far, so good. I can treat the toolbar as a single element and my
code is neat and clean. What I can't figure out how to do is respond
to events for the buttons. I've tried inserting
pointer-events=all in different places to see if it helps bubbling
but no joy.
So, given the defs/use layout above, how can I trap the bold button
being clicked? Or access the bold button as a DOM element so that I
can read/write its attributes?
Sample or pseudo code would be great. In the meantime I will continue
to RTFM.
LL
-
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/
* 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/
