Loading ...
Sorry, an error occurred while loading the content.

Re: Standard Hover Effect - Thanks Eric

Expand Messages
  • jamesd
    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
    Message 1 of 8 , Oct 22, 2012
    • 0 Attachment
      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 svg-developers@yahoogroups.com, "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
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.