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 (i<number){
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/
