title: fill property of SVG does not working in Chrome
body: <p>Trouble is that I can't set value (color) in fill property in Chrome, but in Firefox it works. I tried a lot ways to do it, but there is no result. The only way I see to change color of SVG icon is via jQuery (or JavaScript) by changing id of <code>&lt;symbol&gt;</code>, which is below. Please help me solve this problem!</p>
  
  <p>This is what I need to work in Chrome:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;style&gt;
          span:hover .pathCrossBtn{
              fill: blue;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;svg width="0" height="0" style='display: none;' xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;symbol viewBox="0 0 2048 2048" id="crossBtn"&gt;
          &lt;path class="pathCrossBtn" fill="red" d="M1618 1450q0 40-28 68l-136     136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/&gt;
      &lt;/symbol&gt;
  &lt;/svg&gt;
  &lt;span&gt;
      &lt;svg class="crossBtn" viewBox="0 0 2048 2048" width="30" height="30"&gt;
          &lt;use xlink:href="#crossBtn"&gt;&lt;/use&gt;
      &lt;/svg&gt;
  &lt;/span&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is bad way to solve my problem which is not approriate for me.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;svg width="0" height="0" style='display: none;' xmlns="http://www.w3.org/2000/svg"&gt;
          &lt;symbol viewBox="0 0 2048 2048" id="crossBtnBlue"&gt;
            &lt;path class="pathCrossBtn" fill="blue" d="M1618 1450q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/&gt;
          &lt;/symbol&gt;
          &lt;symbol viewBox="0 0 2048 2048" id="crossBtnRed"&gt;
             &lt;path class="pathCrossBtn" fill="red" d="M1618 1450q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/&gt;
          &lt;/symbol&gt;
  &lt;/svg&gt;
  &lt;span&gt;
      &lt;svg class="crossBtn" viewBox="0 0 2048 2048" width="30" height="30"&gt;
          &lt;use xlink:href="#crossBtnRed"&gt;&lt;/use&gt;
      &lt;/svg&gt;
  &lt;/span&gt;
  &lt;script&gt;
  ;(function(){
      $('.crossBtn')
          .mouseover(function(){
              $('span svg use').attr('xlink:href','#crossBtnBlue');
          })
          .mouseleave(function(){
              $('span svg use').attr('xlink:href','#crossBtnRed');
          })
  }());
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>