Changing an SVG marker’s color – CSS?

As Robert wrote, it’s not possible in SVG 1.1:

From the SVG 1.1 spec:

Properties inherit into the ‘marker’ element from its ancestors;
properties do not inherit from the element referencing the ‘marker’
element.

SVG2 does allow you to say that you want the style from the referencing element:

Properties inherit into the ‘marker’ element from its ancestors;
properties do not inherit from the element referencing the ‘marker’
element. Note however that by using the context-stroke value for the
‘fill’ or ‘stroke’ on elements in its definition, a single marker can
be designed to match the style of the element referencing the marker.

See example 2 in this section of the spec for how that can be used. Do note that this is an editor’s draft, and that the syntax may still change. Implementations of context-fill and context-stroke is not yet in all browsers. If you’re looking for something to test in, it seems to be implemented with a prefix (possibly behind a pref flag, I’m not exactly clear on which flag, but possibly gfx.font_rendering.opentype_svg.enabled) in Firefox Nightlies, see WG discussion here.

Leave a Comment