Arrow with Text SVG Using Markers and Text tags
In this tutorial, we’ll see how to use the <marker>
and <marker>
elements in SVG to create an arrowhead and text at the end of a line.
SVG Code
Below is the code to create an arrow and text using an SVG marker:
<svg width="250" height="100" viewBox="0 0 250 100">
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
<polygon points="0 0, 10 5, 0 10" />
</marker>
</defs>
<line x1="10" y1="50" x2="180" y2="10" stroke="black" stroke-width="2" marker-end="url(#arrowhead)" />
<text x="195" y="15" fill="red">50N 30°</text>
<line x1="10" y1="50" x2="50" y2="10" stroke="black" stroke-width="2" marker-end="url(#arrowhead)" />
<text x="60" y="15" fill="red">20N 45°</text>
</svg>
Live Example
Here’s how the arrow appears in the browser:
To experiment with SVG, along with CSS and JavaScrip, you can use: