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.
Specifications
Usage (according to Chrome Platform Status)
~0.007% of page loads. More data at chromestatus.com.Web Platform Tests (WPT)
View the latest WPT test results for this featureDeveloper 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]
View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist