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

Re: [svg-developers] SVG and rollovers -- more complex situations

Expand Messages
  • Tobias Reif
    ... here it goes:
    Message 1 of 6 , Nov 1, 2000
    • 0 Attachment
      --- Paul Furbacher <pnf@...> wrote:
      > When the mouse is over any
      > part of
      > the button, both the text and the backing rect
      > should change
      > colors.
      > >
      > The problem with such a group is that as when a
      > mouseOver occurs
      > in the text element, a mouseOut occurs in the rect
      > element.
      > It would be great if someone could prove me wrong
      > and demonstrate
      > a way to do this only in SVG.

      here it goes:

      <g>
      <rect id="rect1" style="fill:#yyy" ...>
      <set attributeName="fill" to="#xxx"
      begin="rect1.mouseover;text1.mouseover"
      end="rect1.mouseout;text1.mouseout"/>
      </rect>
      <text id='text1' style="fill:#zzz" ...>
      <set attributeName="fill" to="#www"
      begin="rect1.mouseover;text1.mouseover"
      end="rect1.mouseout;text1.mouseout"/>
      <tspan ...> Press me! </tspan>
      </text>
      </g>

      view source of
      http://www.pinkjuice.com/SVG/svgz/layout02.svgz
      for more mouseOver-variations
      ([<text id="bodylabel"] for example)

      Tobi

      =====
      Tobias Reif http://www.pinkjuice.com/svg/ http://www.pinkjuice.com/
      _/ /
      / / _ / _ / _ / / / _ / _ / _ /
      _/ / / / / / / / / / / / / / / /
      / _ _/ _ _ _/ _ _/ _ _/ _ _ / _ _/ _ _/ _ _/
      _/ / / _ _ _/ / /

      __________________________________________________
      Do You Yahoo!?
      From homework help to love advice, Yahoo! Experts has your answer.
      http://experts.yahoo.com/
    • Eric Wong
      On Wed, Nov 01, 2000 at 12:21:30AM -0500, Paul Furbacher wrote: [ cut ] ... [ cut ] Ah. THere s your problem. Check out the SVG spec, section 19.2.4,
      Message 2 of 6 , Nov 1, 2000
      • 0 Attachment
        On Wed, Nov 01, 2000 at 12:21:30AM -0500, Paul Furbacher wrote:
        [ cut ]
        > particular, I had attempted to reference the nested elements
        > of the group and set their attributes, but no manner of
        > deriving a name.attribute seemed to work. So, I didn't
        [ cut ]

        Ah. THere's your problem. Check out the SVG spec, section 19.2.4,
        "Attributes to identify the target element for an animation" and the
        SMIL-animation spec, section 3.1. You need to use the 'xlink:href'
        (not 'targetElement') element to attach your animation to a different
        element. Like so:

        <g id='button2' transform='translate(200 100)'>
        <set xlink:href='#c1' attributeName='fill' attributeType='CSS'
        to='#822' begin='mouseover' end='mouseout'/>
        <set xlink:href='#c2' attributeName='fill' attributeType='CSS'
        to='#a22' begin='mouseover' end='mouseout'/>

        <circle id='c1' r='20' style='fill: #888;'/>
        <circle id='c2' r='10' style='fill: #aaa;'/>
        </g>

        Regards,
        Eric
      • Peter Sorotokin
        ... [snip] ... Be careful using this analogy. DOM does not really have events for non-leaf nodes. Instead events bubble-up . So if you have a group and it has
        Message 3 of 6 , Nov 1, 2000
        • 0 Attachment
          --- In svg-developers@egroups.com, Paul Furbacher <pnf@h...> wrote:
          > Eric Wong <svge@t...> wrote:
          >
          > > What you want to do is key the rollover-animation to the
          > > container element (the g), not the elements within the
          > > container. This might seem a little counter-intuitive
          > > because you don't think of a container element being able
          > > to have an event (after all, it doesn't really 'exist' in
          > > the display, does it?) But what happens is that one of
          > > the contained graphical sub-elements gets an event, and
          > > that event 'bubbles' up the DOM tree (unless it's
          > > 'captured' along the way.)
          > >

          [snip]

          >
          > Actually, it's not counter-intuitive at all. Most windowing
          > systems work in this manner, if I'm not mistaken

          Be careful using this analogy. DOM does not really have events
          for non-leaf nodes. Instead events "bubble-up". So if you
          have a group and it has two elements in it, when you moving
          mouse from one element to the other you are going to get
          mouseout and mouseover event on the group, even though mouse
          was never leaving the group's content.

          Peter

          [snip]
        Your message has been successfully submitted and would be delivered to recipients shortly.