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/
