Adding Mouseover Effects

I talk about interactivity in SVG in greater detail in Chapter 11. In this chapter, I look only at mouseover and mouseout, which enable you to implement rollovers using SVG declarative syntax.

Rollover effects can be achieved in several ways, using SVG declarative animation. In Listing 5.7, the <set> element is used to create an animation that begins when the text is moused and ends when the mouse is removed. Notice that the <set> element is nested within the <text> element whose font-size property is being animated.

Listing 5.7. (MouseEvents01.svg)
 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> <svg width="800" height="200"> ...

Get Designing SVG Web Graphics now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.