Can I change the fill color of an svg path with CSS?

Question

I have the following code:

  <span>
     <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
        <desc></desc>
        <defs/>
        <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
      </svg>&nbsp;
  </span>

Is it possible to change the fill color of the SVG path with CSS or some other means without actually changing it inside the path tag?

Answer 1

Yes, you can apply CSS to SVG, but you need to match the element, just as when styling HTML. If you just want to apply it to all SVG paths, you could use, for example:

​path {
    fill: blue;
}​

External CSS appears to override the path's fill attribute, at least in WebKit and Gecko-based browsers I tested. Of course, if you write, say, <path style="fill: green"> then that will override external CSS as well.