#Inkscape arrow end of line how to
#Inkscape arrow end of line code

In addition to the id of arrow, there are six attributes on this marker, that you can use on all markers.

#Inkscape arrow end of line code

Here’s the code for the first line and arrowhead (the one pointing right) again. Now let’s take a look at the attributes on the marker element. Without a single change the element, the arrowhead adjusted itself to the line. The ability to adjust with what they’re being attached to is what makes markers special. I didn’t have to alter anything about the marker itself for it to appear properly at the end of the line. The x and y values of the line are the only changes I made. This second line starts at (295,50) and ends at (95,75). Let’s leave the marker alone and change the line so point in the opposite direction and also at a slight angle from horizontal. It’s a black (#000) horizontal line 5px wide, and it’s drawn from the point (50,50) to the point (250,50).Īt the end of the line element is an attribute named marker-end which references the marker with an id of arrow. Ignore the attributes on the marker element (besides the arrow id) for a moment and look at the line element. If you remember your line path commands, this one begins at a point (0,0) then draws a line to the point (0,6) or 6px down, then a line to the point (9,3), before the z command closes the path and draws a line back to (0,0). Inside the marker is a path that creates a small red triangle.

Also notice it’s been given an id of arrow. Notice that it’s contained inside so it won’t display until referenced. This SVG contains a marker and a line that references the marker. The easiest way to understand markers is with a simple example. A marker is always placed inside a element and you refer to it elsewhere to use it. You create a marker using the element and its associated attributes. The most common use is to draw arrowheads or graphical shapes that mark points (polymarkers) on a the resulting line(s). The ElementĪ marker is a type of symbol that gets attached to one or more vertices of a path, line, polyline, or polygon. I want to talk about markers, which are typically used to create arrowheads and other polymarkers. Today I want to talk about a specific type of element that will always be defined in one place and referenced in another.

#Inkscape arrow end of line how to

The last couple of weeks I talked about how to organize your SVG code and how you could define graphical objects for later reuse. Better would be to make things easy on yourself and use a element. You could reuse a graphic you defined in or elements, but then you have to move and rotate your arrowhead with each new line. You could create a new one for each line, but that duplicates code. A common graphic element drawn with SVG are arrowheads.