Re: [svg-developers] SVG and rollovers -- more complex situations
- --- Paul Furbacher <pnf@...> wrote:
> When the mouse is over anyhere it goes:
> part of
> the button, both the text and the backing rect
> should change
> The problem with such a group is that as when a
> mouseOver occurs
> in the text element, a mouseOut occurs in the rect
> It would be great if someone could prove me wrong
> and demonstrate
> a way to do this only in SVG.
<rect id="rect1" style="fill:#yyy" ...>
<set attributeName="fill" to="#xxx"
<text id='text1' style="fill:#zzz" ...>
<set attributeName="fill" to="#www"
<tspan ...> Press me! </tspan>
view source of
for more mouseOver-variations
([<text id="bodylabel"] for example)
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.
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;'/>
- --- In firstname.lastname@example.org, Paul Furbacher <pnf@h...> wrote:
> Eric Wong <svge@t...> wrote:[snip]
> > 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.)
>Be careful using this analogy. DOM does not really have events
> Actually, it's not counter-intuitive at all. Most windowing
> systems work in this manner, if I'm not mistaken
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.