Some SVG Examples
This section shows a few short examples of SVG code, including how to use SVG to create a rollover and how XLink is used in SVG.
SVG Rollovers
In a conventional HTML Web page, it is necessary to use JavaScript to produce rollover effects. In SVG, rollover effects can be produced using SVG declarative syntax alone. Listing 15.2 shows a simple rollover with a message about SVG.
Listing 15.2. Mouseover.svg: A Message About SVG
<?xml version='1.0'?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg> <rect id="myRect" x="20" y="30" rx="10" ry="10" width="250" height="50" style="fill:white; stroke:blue; stroke-width:4"> <set attributeName="fill" from="white" to="#FFFF00" ... |
Get Sams Teach Yourself XML in 10 Minutes 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.
