O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required