Polygons
For Mozilla
Drawing or Scripting Tips
Alexander Fritze has added
libart which is a library for high-performance 2D graphics to Mozilla.
Thanks to him all of my earlier work is the past. ;-)
Let's start with a basic shape; polygon.
The 'polygon' element defines a closed shape consisting of a set of connected straight line segments.
Thus in this way a polygon is described the same as a polyline with the difference being that in a polygon a line is drawn or computed from the last set of points to the first set of points to close the object to a solid.
Grid Scale 1 : 20px
This is a SVG image. |
| 0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
| 1 |
polygon-a
polygon-b
polygon-c
|
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
|
Grid Scale 1 : 20px
This is a png image of the SVG. |
| 0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
| 1 |
|
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
|
All three objects are polygons, yes even c. The points that make up the polygon are contained in the view box or to say; all coordinate values are in the user coordinate system.
Mathematically, a 'polygon' element can be mapped to an equivalent 'path' element as follows:
- perform an absolute moveto operation to the first coordinate pair in the list of points
- for each subsequent coordinate pair, perform an absolute lineto operation to that coordinate pair
- perform a closepath command
Polygon-a is a simple three point object with fill but no stroke. Stroke can be thought of as an outline of the object as seen in polygons b and c.
<svg:polygon points="20,20 30,60 60,30" style="stroke:none; stroke-width:0; stroke-opacity:1; fill:blue; fill-opacity:1;"/>
Polygon-b is some what more complicated than 'a' but it is the same in that it is using straight lines with the last segment being computed closepath command. Also it has the the value of 3 for the stroke-width with the color being set to black.
Polygon-c, and yes this is a polygon too, has 100 point sets and thus 101 line segments. It as has a value for the stroke-width. This is why the use of circle was such a great thing when Alex Fritze enabled it for Mozilla. Before the above polygon was the only way to draw a circle. What a saving in size: <circle cx="px" cy="px" r="px" style="fill:; fill-opacity:; stroke:; stroke-width:; stroke-opacity:;" /> is all that is needed now instead of the 100 pairs of points needed to make something that looks like a circle.