Re: Standard Hover Effect

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/