SVG: align tip of "marker-end" with end of line -
i'm drawing svg line "marker-end" make arrow. draws arrowhead extending beyond end of line, making whole arrow longer, whole arrow same length original line. is, tip of arrowhead should @ endpoint of line. how do that?
making line shorter accommodate size of arrowhead won't work. size of arrowhead depends on thickness of line (which good), don't know thickness because can specified in style element that's been written svg document.
in example, i'd the arrowhead entirely inside square, tip @ square's corner, rather sticking out of square.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <g><marker id="arrowhead0" viewbox="0 0 60 60" refx="0" refy="30" markerunits="strokewidth" markerwidth="8" markerheight="10" orient="auto"> <path d="m 0 0 l 60 30 l 0 60 z" fill="#800000" /> </marker> <line marker-end="url(#arrowhead0)" x1="1" y1="1" x2="100" y2="100" stroke="#800000" /> <rect x="1" y="1" width="100" height="100" stroke="green" fill="none"/> </g></svg>
setting refx atribute 60 (which think might width of arrowhead when oriented pointing right) seems fix issue. scaling width seems fine, not sure other attributes.
i no svg expert, found interesting , played attributes until stumbled upon solution, take grain of salt.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <g><marker id="arrowhead0" viewbox="0 0 60 60" refx="0" refy="30" markerunits="strokewidth" markerwidth="8" markerheight="10" orient="auto"> <path d="m 0 0 l 60 30 l 0 60 z" fill="#800000" /> </marker> <marker id="arrowhead1" viewbox="0 0 60 60" refx="60" refy="30" markerunits="strokewidth" markerwidth="8" markerheight="10" orient="auto"> <path d="m 0 0 l 60 30 l 0 60 z" fill="#800000" /> </marker> <marker id="arrowhead2" viewbox="0 0 60 60" refx="60" refy="30" markerunits="strokewidth" markerwidth="16" markerheight="10" orient="auto"> <path d="m 0 0 l 60 30 l 0 60 z" fill="#800000" /> </marker> <line marker-end="url(#arrowhead0)" x1="1" y1="1" x2="100" y2="100" stroke="#800000" /> <line marker-end="url(#arrowhead1)" x1="1" y1="100" x2="50" y2="50" stroke="#800000" /> <line marker-end="url(#arrowhead2)" x1="100" y1="1" x2="50" y2="50" stroke="#800000" /> <rect x="1" y="1" width="100" height="100" stroke="green" fill="none"/> </g></svg>
Comments
Post a Comment