On Thu, 18 Oct 2012 00:53:58 +0200, jamesd <[email protected]> wrote:
> I am currently using the below to highlight a button using the use
> element. It works in Firefox, but not in Chrome or IE.
>
> Could someone show me the proper way to use this action. I need it to be
> flexible, meaning not a specific javascript, as I use it on different
> instances with different color fills.
>
>
> <use xlink:href="#go_fill" fill="#2500B8"
> onmouseover="evt.target.setAttribute('fill', '#3DFF3D');"
> onmouseout="evt.target.setAttribute('fill','#2500B8');"/>
>
> Thanks in advance.
>
> James
When you hover the <use> what you're actually hovering is an instance of
the subtree it points to (referred to as the "template" from here on).
Firefox does a full actual clone of that subtree and inserts it as a child
of the <use>, while the spec calls for "conceptual cloning", and is quite
clear on the point that the event target should be SVGElementInstance
objects - see https://bugzilla.mozilla.org/show_bug.cgi?id=265895. The
SVGElementInstance interface doesn't inherit the Element interface, and
therefore has no setAttribute method. You can fetch the template Nodes if
you want (SVGElementInstanec.correspondingElement [1]) if you want to
modify the template elements.
You can't change the fill on just one of the instances, either you modify
the template (doing so will affect all instances) or you modify the style
on the <use> element itself and use e.g fill="currentColor" where
necessary in the template. If you have a need to change the fill per
instance then you should just clone the tree manually instead, and not use
<use>.
[1]
http://www.w3.org/TR/SVG11/struct.html#__svg__SVGElementInstance__correspondingElement
--
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed
------------------------------------
-----
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/
