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 the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
