Web features explorer

context-fill and context-stroke

Limited availability

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.

Browser support

  • Chrome 124 Released on 2024-04-16
  • Chrome Android 124 Released on 2024-04-16
  • Edge 124 Released on 2024-04-18
  • Firefox 111 Released on 2023-03-14
  • Firefox for Android 111 Released on 2023-03-14
  • Safari Not supported
  • Safari on iOS Not supported

Baseline availability blocked since April 2024 by Safari (30 months)

Need this feature?
Leave a šŸ‘ on the feedback issue
Don't forget to also leave a comment explaining your specific use case.

MDN documentation

Usage (according to Chrome Platform Status)

~0.007% of page loads. More data at chromestatus.com.

Developer use cases

  • 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 <use> element, and the arrow head is the fill color inside the marker defined in <defs>, 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 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 <use> element, and the arrow head is the fill color inside the marker defined in <defs>, 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 [see original comment]