title: CSS svg color transition error in Chrome
body: <p>I have a menu in css whose icons are svg. When you mouse over the button, change the color of the icon via a CSS transition. Interestingly, not all the buttons work. It depends on the content of the href. Why?</p>
  
  <p>This works:</p>
  
  <pre><code>&lt;li class="navButton"&gt;
    &lt;a id="home" href="home.php"&gt;
     &lt;span class="icon"&gt;
      &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" 
       x="0px" y="0px" width="30px" height="30px" 
       viewBox="0 0 512 512" enable-background="new 0 0 512 512" 
       xml:space="preserve"&gt;
  
        &lt;path class="icon_path" fill="white" 
         d="M256,69.972L50,275.815h42.507v166.213h326.985V275.815H462L256,69.972z 
            M374.492,397.028h-73.767v-86.495 h-89.451v86.495h-73.768V251.99
            L256,133.587l118.492,118.402V397.028z"/&gt;
      &lt;/svg&gt;
     &lt;/span&gt;
     &lt;span class="text"&gt;Home&lt;/span&gt;
    &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>This doesn't work:</p>
  
  <pre><code>&lt;li class="navButton"&gt;
    &lt;a id="projects" href="projects.php"&gt;
      &lt;span class="icon"&gt;
              &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" 
       x="0px" y="0px" width="30px" height="30px" 
       viewBox="0 0 512 512" enable-background="new 0 0 512 512"
       xml:space="preserve"&gt;
  
         &lt;path class="icon_path" fill="white" 
          d="M436.631,207.445v163.681L279.232,462V298.319L436.631,207.445z 
             M256,258.08l180.201-104.04L256,50 L75.799,154.041L256,258.08z 
             M232.768,298.319L75.369,207.445v163.681L232.768,462V298.319z"/&gt;
      &lt;/svg&gt;
      &lt;/span&gt;
      &lt;span class="text"&gt;Projects&lt;/span&gt;
    &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>If I change the href content, eg projects2.php works. Too crazy..</p>