I use arrows on a lot of my diagrams. The arrow is made up of an arrow head and an arrow tail. What I’d like to do is specify the color once, and have the arrow head and tail both the same color. Unfortunately in SVG, the arrow tail is the stroke color in a <use> element, and the arrow head is the fill color inside <defs>, and we need to make up a page-unique id to link the two.
I was trying to use the currentColor as described in this article[1] to make the two match. No such luck in 2016. However, some browsers now support[2] using context-stroke as the fill= color in the arrow head marker, and it will use the stroke color from the arrow tail. Success! Unfortunately I can’t use it yet because it’s not supported across browsers:
- Firefox: Mar 2023
- Chrome: Apr 2024
- Safari: not as of Sep 2026 :-(
Demo (try in Chrome, Firefox, Safari):
I have three workarounds I use.
One is to create a new def for each color. If there are 100 arrows we need 100 markers each with a unique id, and then we have to match up the arrow tails to the arrow head with the corresponding id. This is awkward. I have to create lots of markers, e.g. marker=url(#arrowhead-red), marker=url(#arrowhead-yellow),
marker=url(#arrowhead-black), etc.
Sometimes I resort to Javascript to create all of these pairs.
The second workaround is to just make all the arrows the same color. :-( It’s worse for the reader but it’s easier to implement.
The third workaround is to not use an arrowhead. Just draw the line. :-( It’s worse for the reader, but it’s easier to implement.