This chapter is from the book
This chapter is from the book
This chapter is from the book
The polyline Element
The polyline element allows us to create shapes that consist of a number of straight lines. Such polyline shapes may be filled or have no fill.
The position of the ends of each line that makes up the polyline shape are defined in the points attribute of the polyline element. Style information is applied, as previously described, by using the style attribute (or individual attributes corresponding to style properties).
Listing 3.12 shows two polyline shapes, one of which is filled; whereas the other is specified, within the style attribute, as having no fill.
Listing 3.12 SimplePolyline.svg—Two Simple Polyline 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"> <polyline style="stroke:#000000; stroke-width:2; fill:#CCCCCC;" points="30,200 30,50 130 50" /> <polyline style="stroke:#000000; stroke-width:2; fill:none;" points="230,200 230,50 330 50" /> </svg>
As you can see in Figure 3.10, which is zoomed and panned, the fill of the left polyline element is pale gray. If we did not specify a value for the fill property within the style attribute, the default black fill would be applied. For the polyline element on the right, we specify within the style attribute that there is no fill using the CSS declaration fill:none.
){kind=link}
Figure 3.10 A filled and nonfilled polyline.
Typically, a polyline element is used to create an open shape. However, if you include a pair of coordinates within the points attribute that match the starting point, for example, you can create a closed shape, as shown in Listing 3.13, SimplePolyline02.svg.
Listing 3.13 SimplePolyline02.svg—A Closed Polyline Shape
<?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"> <polyline style="stroke:#000000; stroke-width:2; fill:#CCCCCC;" points="30,200 30,50 130,50 30,200" /> <polyline style="stroke:#000000; stroke-width:2; fill:none;" points="230,200 230,50 330,50 230,200" /> </svg>
As you can see in Figure 3.11, which is zoomed and panned, Listing 3.13 creates two triangles, one filled and one that lacks a fill. You can create closed shapes with an arbitrary number of sides using the same technique, but the polygon element described in the next section is specifically designed to create such shapes. The advantage of the polygon is that the point at which the shape is closed has a neat line join, while the line join for the polyline elements is not sharp, as you can see if you zoom in on the bottom vertex of either of the triangles when you run Listing 3.13.
){kind=link}
Figure 3.11 Two closed polyline shapes.
A polyline element may be animated by any of the SVG animation elements—animate, set, animateColor, animateMotion, or animateTransform—which are described in Chapter 11.