title: Changing an SVG marker's color - CSS?
body: <p>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 &amp; CSS).</p>
  
  <p>I want to define a marker, and then be able to use it in various places but with different colors.</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;?xml version="1.0" standalone="no"?&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
       viewBox="0 0 180 320"&gt;
  
  &lt;defs&gt;
      &lt;marker class="AsteriskMarkerClass" id="AsteriskMarker" viewBox="-1 -1 2 2" stroke-width="0.1"&gt;
          &lt;line x1="0" y1="-1" x2="0" y2="1" /&gt;
          &lt;line x1="-1" y1="0" x2="1" y2="0" /&gt; 
          &lt;line x1="-0.7071" y1="-0.7071" x2="0.7071" y2="0.7071" /&gt;
          &lt;line x1="-0.7071" y1="0.7071"  x2="0.7071" y2="-0.7071" /&gt;
      &lt;/marker&gt;
  &lt;/defs&gt;
  
  .AsteriskMarkerClass { stroke:red; }
      &lt;path d="M 60,100"
            stroke-width="10"
            marker-start="url(#AsteriskMarker)" /&gt;
  
  .AsteriskMarkerClass { color:green; }
      &lt;path d="M 90,140"
            stroke-width="10"
            marker-start="url(#AsteriskMarker)" /&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>If someone could give me tip on how this might be done, I would appreciate it.</p>