Re: Standard Hover Effect - Thanks Eric

Excellant response!! Thank you Erik. As I said I just want to use SVG for design, couldn't care less about this.setAttribute or evt.target.setAttribute. I just want to add a universal hover effect and move on. Again, thanks.

With that said, one down many to go.

James


--- In [email protected], "Erik Dahlstrom" <ed@...> wrote:
>
> Hi James,
> 
> I'll try to explain it again then, no problems. If you need the DOM nodes  
> for custom styling and content modification, basically the power of making  
> each instance look different and actually be independent objects, then  
> XSLT is one option, that or just copy-pasting the markup you need.
> 
> Your example could be rewritten like this (note the slight difference in  
> how the fill colors are set):
> 
> <svg xmlns="http://www.w3.org/2000/svg"  
> xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080"  
> preserveAspectRatio="none" xml:space="preserve">
> <defs>
>    <path id="go_fill"  
> d="M50.06,238.925v-55.168H7.2V73.424h42.86V18.259l103.029,110.33L50.06,238.925z"/>
> </defs>
> 
> <g id="next" transform="matrix(2 0 0 2 800 250)" cursor="pointer">
>    <use xlink:href="#go_fill" fill="#B8CBFF"
>     onmouseover="this.setAttribute('fill', '#3DFF3D');"
>     onmouseout="this.setAttribute('fill','#B8CBFF');"
>     onclick="this.setAttribute('fill', '#B8CBFF');"/>
> </g>
> </svg>
> 
> This will set the fill on the <use> element instead of trying to set the  
> fill on the element the <use> points to, if you wanted you could also do  
> something like 'onmouseover="this.currentTarget.setAttribute(...)"'. Both  
> ways should work just fine in all browsers.
> 
> Another alternative is to set the colors with CSS, like this:
> 
> <svg xmlns="http://www.w3.org/2000/svg"  
> xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080"  
> preserveAspectRatio="none" xml:space="preserve">
> <defs>
>    <path id="go_fill"  
> d="M50.06,238.925v-55.168H7.2V73.424h42.86V18.259l103.029,110.33L50.06,238.925z"/>
>    <style>
> 	use:hover { fill: #3DFF3D; }
> 	use:active { fill: purple; } /* picked another color to show that clicked  
> state is different */
>    </style>
> </defs>
> 
> <g id="next" transform="matrix(2 0 0 2 800 250)" cursor="pointer">
>    <use xlink:href="#go_fill" fill="#B8CBFF" />
> </g>
> </svg>
> 
> Again, that should work fine everywhere.
> 
> Firefox is incorrect in letting your original example work, to understand  
> why you can inspect the value of 'evt.target' in the onmouseover attribute  
> for example. Here's a simple example, click the arrow and compare the  
> result in the various browsers:
> 
> <svg xmlns="http://www.w3.org/2000/svg"  
> xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080"  
> preserveAspectRatio="none" xml:space="preserve">
> <defs>
>    <path id="go_fill"  
> d="M50.06,238.925v-55.168H7.2V73.424h42.86V18.259l103.029,110.33L50.06,238.925z"/>
>    <style>
> 	use:hover { fill: #3DFF3D; }
> 	use:active { fill: purple; }
>    </style>
> </defs>
> 
> <g id="next" transform="matrix(2 0 0 2 800 250)" cursor="pointer">
>    <use xlink:href="#go_fill" fill="#B8CBFF" onclick="alert('evt.target  
> (the element that was the original target of the event): ' + evt.target +  
> '\nevt.currentTarget (the element currently handling the event, since it  
> may have bubbled): ' + evt.currentTarget)"/>
> </g>
> </svg>
> 
> Hope this helps
> /Erik
> 



------------------------------------

-----
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/