We can see the affect of this if we alter the start or end point of the line: Setting orient to auto aligns the arrowhead to the path. Note that like the rest of SVG, the refX and refY attributes are case-sensitive. In the case of a solid arrowhead, the values for an end arrow will be set to 0 for X position, and half the height of the marker for the Y position. Setting these values to 0 (the default) would place the top left corner of the at the termination of the line.
The refX and refY attributes position the marker relative to the end of the path. The of the bottom of the SVG references this marker via its. In this case, the shape is a triangle that touches the upper left and lower left corners of the marker area, with a point that touches the extreme right side. In principle, any shape, line, or collection of elements could be drawn inside this space as an arrowhead. In the example above, the space for the arrowhead is 10 units wide and 7 units high.
It’s easiest to think of the as being like a or : an element drawn within its own unique SVG space. The arrow shape is defined in a marker element, which is placed inside at the start of your SVG: You can add an arrowhead to line, polyline, polygon and path elements. While it is possible to decorate a line with its own, individual hand-coded arrow shape, it is much more efficient to create an arrowhead pattern via a element. Given that one of the common purposes of SVG is to make diagrams and illustrations, it makes sense that terminating lines and paths with arrowheads is a very common request.
0 kommentar(er)
