Changing an SVG marker's color - CSS?

Question

I've seen a number of examples of using CSS to affect the style of SVG elements, but none so far that help with my question about markers. And honestly, I'm still working through the syntax of both(SVG & CSS). I want to define a marker, and then be able to use it in various places but with different colors. For example: ```

Accepted Answer

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.

Changing an SVG marker's color - CSS?

Solution

Problem