The polygon Element
The polygon element is designed to create closed shapes, the edges of which consist of multiple (that is, three or more) straight lines. The syntax of the polygon element is essentially identical to that of the polyline element. Listing 3.14, SimplePolygons.svg, was created by simply replacing polyline with polygon in the start tags of Listing 3.13.
Listing 3.14 SimplePolygons.svgTwo Simple Polygon Shapes
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="500" height="300"> <polygon style="stroke:#000000; stroke-width:2; fill:#CCCCCC;" points="30,200 30,50 130,50 30,200" /> <polygon style="stroke:#000000; stroke-width:2; fill:none;" points="230,200 230,50 330,50 230,200" /> </svg>
Not surprisingly, the visual appearance produced is identical to that shown in Figure 3.11 in the preceding section, except that zooming in on the bottom vertex of either triangle shows that the polygon element produces a sharp, neat line join.
A polygon element may be animated by any of the SVG animation elementsanimate, set, animateColor, animateMotion, or animateTransformwhich are described in Chapter 11.