Polylines
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; polylines.
To do this, I'm using a SVG grid that is actually drawn with polylines. This grid is in a view box that is described below.
<svg:svg width="200px" height="200px">
A view box is the stage where the SVG images are shown. As seen below it is white. Whether one uses Plugin SVG or inline script as used here, there is no way to make it transparent. In the older SVG that is the first SVG to be rendered in Mozilla this was no so. The background was transparent and was also an inline image, in that it would flow with text. Now it is a block container much like a paragraph.
It is in the view box where the coordinates are set. SVG uses an X/Y point system with the upper left corner being zero that is to say X="0" and Y="0".
Also "<foreignObject>" is being used here to describe the points which is very helpful because "SVG Text" is not implemented yet.
Grid Scale 1 : 20px
This is a SVG image. |
| 0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
| 1 |
(0,0)
polyline-a
polyline-b
(200,0)
(100,100)
(0,200)
(200,200)
|
| 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 |
|
The two polylines above take the same form. Of course the points are different except for the middle point. It is X="100px" and Y="100px" Which is written as (100,100) .
<svg:polyline points="," style="stroke:; stroke-width:; stroke-opacity:; />
Polyline-a is set with points="0,0 100,100 200,0"
Polyline-b is set with points="0,200 100,100 200,200"