Here we explore the many ways a path element can be put together, along with the result.
This element can be used to produce any shape no matter how complex, or how many curves and corners it has.
The custom shapes (circle, polygon, polyline, rect, etc.) are simply quick ways to produce those shapes.
Programmatically constructing shapes this way may be tedious, but in an environment that uses dynamic data, it is the only way to do it.
The basic syntax of a 'path' statement uses a few attributes to tell it what to do at certain points.
Example 1
In that statement, the 'd' stands for data. The command follows in quotes, followed by style commands.
Here are a few of the command letters that can be use:
When the command letters are upper-case as above, the x,y coordinates are considered to be absolute. If they are lower-case, they are considered relative coordinates. However, both can be used in the same path.
The first example above executes the command 'M' to move to the coordinates 200,50. Then draw a black line 3 pixels wide to location 300,50.
Next we draw a blue diamond using 'Z' to close the shape.
Example 2
As noted above, this only draws 3 lines, but the 'Z' finishes this for us.
Otherwise, this is what is required:
Example 3
Example 4
Here is another quadriped but turned sideways.
Note we included multiple sets of 'x' 'y' coordinates with the 'L' command, but there are only 3 pairs of coordinates, instead of 4.
We used the 'Z' command to draw a straight line back to the originating coordinates, so they were not necessary.
More about the path statement can be found here: