Using style | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Using polygon to Render Rectangles

You already know that the SVG rect element defines a rectangle. The SVG polygon element can accomplish the same result. Defining a rectangle by means of this SVG element is useful in situations where you need to modify the rectangle. For example, a rectangle that is defined with an SVG polygon element allows you to modify the vertices of that rectangle during animation in order to render a quadrilateral.

The SVG document in Listing 1.3 uses the SVG polygon element in order to render a red rectangle.

Listing 1.3 rect2.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="100%" height="100%"> <!-- draw rectangle --> <g transform="translate(50,50)"> <polygon  points="0,0 150,0 150,50 0,50"  style="fill:red;"/> </g> </svg>

Remarks

Notice the following transform attribute that qualifies the SVG g element:

<g transform="translate(50,50)">

The value of the transform attribute is the function translate(50,50), which shifts the origin of the contained graphics image (a rectangle in this case) from the SVG point (0,0) to the SVG point (50,50). The key point to notice is that the transform attribute shifts only the components that are defined inside the enclosing SVG g element. Multiple SVG g elements can be shifted independently of each other, which means that you can render the same component in multiple locations in the SVG plane without having to redefine the values of any of the attributes of the component in question. For example, you could render four non-overlapping rectangles with the following SVG code fragment:

<g transform="translate(100,100)">   <rect x="0" y="0" width="50" height="50"         style="fill:red;"/> </g> <g transform="translate(300,100)">   <rect x="0" y="0" width="50" height="50"         style="fill:red;"/> </g> <g transform="translate(100,300)">   <rect x="0" y="0" width="50" height="50"         style="fill:red;"/> </g> <g transform="translate(300,300)">   <rect x="0" y="0" width="50" height="50"         style="fill:red;"/> </g>

A more succinct technique involving xlink:href that accomplishes the same result with less code will be discussed in Chapter 3. This technique is extremely useful when you generate bar charts and graphs, such as the examples in Chapter 10.

As you've probably surmised, an SVG polygon element contains a list of vertices (where each vertex specifies a point in the SVG coordinate system) that represents a polygon in the Euclidean plane. Since there is no restriction on the number of vertices, the SVG polygon element is extremely versatile. Keep in mind, though, that while you can use this element for defining a rectangle, the purpose of your code is clearer if you use the SVG rect element for rendering a rectangle.

You can think of a polygon as a closed path; that is, the coordinates of the first vertex coincides with those of the final vertex in a path. You can also use the SVG polyline element in order to render a polygon; just remember that the last vertex in the list must be the same as the first vertex in the list, otherwise the rendered component will not look like a polygon.