HTML and CSS Reference
In-Depth Information
<body>
<svg>
<circle id="Circle" cx="50" cy="50" r="50" fill="green" onmouseover="Red(evt)"
onmouseout="Green(evt)"/>
</svg>
</body>
</html>
This code produces the output shown in Figure 1-41. The JavaScript event handlers turn
the circle red when the mouse hovers over it and back to green when the mouse is moved
out of the circle.
FIGURE 1-41 A circle drawn using SVG
All the shape-drawing and line-drawing functionality you saw in the <canvas> element
discussion exists for SVG as well, although the syntax is different, of course. The following
code produces a slightly more elaborate graphic.
<svg>
<rect id="lightStandard" x="100" y="100" width="60" height="200" fill="black"/>
<circle id="redLight" cx="129" cy="145" r="25" fill="red"/>
<circle id="amberLight" cx="129" cy="205" r="25" fill="yellow"/>
<circle id="greenLight" cx="129" cy="265" r="25" fill="green"/>
</svg>
The image in Figure 1-42 shows the output of this code:
FIGURE 1-42 Multiple shapes drawn using SVG
Search WWH ::




Custom Search