coderef

context-fill and context-strokeLimited 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.

Not yet supported in all major browsers — check the table and provide a fallback.

Browser support

DesktopChrome
1–123Not supported
124+Supportedsince Apr 16, 2024
Current: 155
Edge
12–123Not supported
124+Supportedsince Apr 18, 2024
Current: 154
Firefox
1–110Not supported
111+Supportedsince Mar 14, 2023
Current: 157
Safari
✕Not supportedup to 27
Current: 27
MobileChrome Android
18–123Not supported
124+Supportedsince Apr 16, 2024
Current: 155
Firefox Android
4–110Not supported
111+Supportedsince Mar 14, 2023
Current: 157
Safari iOS
✕Not supportedup to 27
Current: 27

How to use

Not supported in Safari, Safari iOS. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

Full syntax and examples are on MDN — see the links below.

Feature detection

There’s no simple runtime check for this feature; rely on the support table and test in your target browsers.

Sub-features

Support for each part of the feature (10). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
circle.fill.context-fill124124111✕124111✕
ellipse.fill.context-fill124124111✕1241113
path.fill.context-fill124124111✕124111✕
polygon.fill.context-fill124124111✕124111✕
polyline.fill.context-fill124124111✕124111✕
rect.fill.context-fill124124111✕124111✕
text.fill.context-fill124124111✕124111✕
textPath.fill.context-fill124124111✕124111✕
tspan.fill.context-fill124124111✕124111✕
svg.global_attributes.stroke.context-stroke124124111✕124111✕