title: Using external CSS with <use> of SVG
body: <p>I'd like to create a svg sprite using <code>&lt;symbol&gt;</code> and <code>&lt;use&gt;</code> but I'd like to add an external CSS too...</p>
  
  <p>My SVG :</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;style type="text/css"&gt;@import url(mycss.css);&lt;/style&gt;
    &lt;symbol id="cross" viewBox="0 0 20 20"&gt;
      &lt;path class="cross1" d="M17.1 5.2l-2.6-2.6-4.6 4.7-4.7-4.7-2.5 2.6 4.7 4.7-4.7 4.7 2.5 2.5 4.7-4.7 4.6 4.7 2.6-2.5-4.7-4.7"/&gt;
    &lt;/symbol&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>My HTML :</p>
  
  <pre><code>&lt;svg&gt;&lt;use xlink:href="../images/sprites.svg#cross"&gt;&lt;/use&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>My CSS :</p>
  
  <pre><code>#cross &gt; .cross1{
    fill: red;
  }
  </code></pre>
  
  <p>The <code>fill</code> property doesn't work...</p>