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:

<?xml version="1.0" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg"      xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"      viewBox="0 0 180 320">  <defs>     <marker class="AsteriskMarkerClass" id="AsteriskMarker" viewBox="-1 -1 2 2" stroke-width="0.1">         <line x1="0" y1="-1" x2="0" y2="1" />         <line x1="-1" y1="0" x2="1" y2="0" />          <line x1="-0.7071" y1="-0.7071" x2="0.7071" y2="0.7071" />         <line x1="-0.7071" y1="0.7071"  x2="0.7071" y2="-0.7071" />     </marker> </defs>  .AsteriskMarkerClass { stroke:red; }     <path d="M 60,100"           stroke-width="10"           marker-start="url(#AsteriskMarker)" />  .AsteriskMarkerClass { color:green; }     <path d="M 90,140"           stroke-width="10"           marker-start="url(#AsteriskMarker)" />  </svg> 

If someone could give me tip on how this might be done, I would appreciate it.

Answer 1

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.