SVG Paths
Tutorial
For the SVG shapes we have covered so far, we provide parameters that affect the shapes properties, such as where it is located, it's width, height. SVG paths are different. Instead of having a fixed shape they are a way of drawing by providing a set of instructions for a pen. Instead of saying "draw a rectangle" you say something akin to "move the pen in a line to the right, then in a line down, then in a line to the left, then in a line to the right".
SVG Paths are created with the path element. Paths are simple because they have only one required attribute d. However, it's not quite simple because what goes in the d attribute is "path data", which is a specification of how to draw. This specification is it's own mini language.
The path language is a series of commands with arguments processed from left to right. Altough there are many commands, we will cover just three simple ones.
The move command, specified by the letter M, places the drawing pen at the specified coordinates. For example to place the pen at (150, 240) you would say M 150 240. Paths always start with an M because you have to place the pen somewhere before you can start drawing.
The line command is specified by the letter L. The line command one or more points as arguments and will draw straight lines between the points. To draw two lines (150, 240) to (200, 200) and (200, 200) to (345, 456) you write M 150 240 L 200 200 345 456.
Finally the path close command is specified by the letter Z. Closing the path means a straight line is drawn from the starting point of the path (the one we specified with the M command) to the current point. The effect of drawing this line is to enclose the path. If the path element has the style "fill" specified, then the enclosed area is painted with this color.
Let's step through an example using these three commands. Below we'll draw a polygon one line segment at a time.
<path d="M 100 100 L 10 10"/>
<path d="M 100 100 L 10 10 50 10"/>
<path d="M 100 100 L 10 10 50 10 85 50"/>
<path d="M 100 100 L 10 10 50 10 85 50 Z"/>
All path commands have two versions. When using an upper-case letter the commands operate on absolute positions and when using lower-case letters the commands operate on relative positions. Relative positions means that each point is specified in relation to the last one. A point ten to the right of the current point would be (10,0) no matter where the current point happens to be.
Paths offer some advantages compared to SVG lines. Paths can specify as many lines as desired within one path element. A given path element acts as a group for the lines drawn by it. Although not covered here, paths can also generate curved lines.
For the most part, D3 will generate path data for you. However it is still good to know what is possible and to be able to understand what D3 did when your path does not turn out as expected.
Talk about bad path data from D3... typical problem is NaN instead of numbers.
Quiz
Things to do
- Draw a triangle. It should go through the points (5, 5), (5, 55), (55, 55).
- Fill the triangle with the color red.
- Draw a cross with one path element. The cross is two lines one is (20, 10) to (30, 10) and the second is (25, 5) to (25, 15).
- Use a transform to move the cross to be centered at (100, 100)
- Create a "cross" class and make the stroke 4 px wide and orange.