Back to all features
Open for signals SVG

context-fill and context-stroke

The context-fill and context-stroke CSS values are used with fill and stroke in SVG <marker> or <use> elements to match a color from where they appear.

Community use cases (1)

What I want to do with this feature

I use arrows on a lot of my visualizations. 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 1, the arrow tail is the stroke color in a element, and the arrow head is the fill color inside the marker defined in , and I need to make up a page-unique id to link the two.

Do an image search for "vector field" to see the types of data visualizations that use hundreds or thousands of arrows. (For example: https://en.wikipedia.org/wiki/Phase_portrait#/media/File:Van_der_pols_equation_phase_portrait.svg)

I've been wanting context-stroke feature for over a decade. And it's not just me. See https://stackoverflow.com/questions/16664584/changing-an-svg-markers-color-css and https://stackoverflow.com/questions/32964457/match-arrowhead-color-to-line-color-in-d3 as examples of people wanting this.

It looks like marking markers match the path is the exact use case mentioned in the specification https://w3c.github.io/svgwg/svg2-draft/painting.html#SpecifyingPaint

What I'm having to do in the meantime

My main workaround 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. I need to make sure the ids are globally unique.

But because that's awkward, sometimes I just make all the arrows the same color. And sometimes I draw the lines in different colors and skip the arrowhead marker. (This is what I did a few weeks ago when I was building a data visualization)