title: Using CSS to transition the fill property of an SVG path on hover
body: <p>I'm including an SVG image file on my page within an <code>object</code> tag, like this:</p>
  
  <pre><code>&lt;object type="image/svg+xml" data="linkto/image.svg"&gt;
     &lt;!-- fallback image in CSS --&gt;
  &lt;/object&gt;
  </code></pre>
  
  <p>The image in question is a world map, i want to transition the <code>fill</code> property when the mouse hovers over a <code>group</code>, in this case I've grouped my SVG by continent, so South America looks something like this:</p>
  
  <pre><code>&lt;g id="south_america"&gt;
      &lt;path fill="#FAFAFA" d="(edited for brevity)"/&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>I can get the <code>fill</code> property to change on hover by using the following CSS at the top of my SVG document:</p>
  
  <pre><code>&lt;style&gt;
  #south_america path {
      transition: fill .4s ease;
  }
  #south_america:hover path {
      fill:white;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>But I can't get the <code>fill</code> colour to fade in with a CSS transition, the colour just changes instantly, can anyone shed light on this please?</p>