title: Why does svg <use xlink:href="#"/> referencing an element with clip-path not work?
body: <p>When implementing an SVG sprite, an <code>&lt;svg&gt;</code> element is created and svg elements are referenced via the <code>&lt;use&gt;</code> element. The containing <code>&lt;svg&gt;</code> element is then hidden using <code>style="display: none;"</code></p>
  
  <p>The clip-Path attribute does not render, but the path does. This leaves my path looking different from how I want it to.</p>
  
  <p>How do I use an svg <code>&lt;use xlink:href="#"/&gt;</code> referencing an element with clip-path?</p>
  
  <p><em>I used grunt-svg-store to create my svg sprite, but have simplified this example for Q&amp;A format <a href="https://css-tricks.com/svg-sprites-use-better-icon-fonts/" rel="nofollow">https://css-tricks.com/svg-sprites-use-better-icon-fonts/</a></em>
      </p>
  
  <pre><code>&lt;svg id="svg-test" style="display: none;"&gt;
    &lt;clipPath id="my-clip-1"&gt;
      &lt;circle id="circle-1" cx="50" cy="50" r="50" /&gt;
    &lt;/clipPath&gt;
    &lt;path id="svg-test-reference" clip-path="url(#my-clip-1)" d="M10-39.288h80v80H10z" /&gt;
  &lt;/svg&gt;
  
  &lt;!-- Reference SVG &lt;path&gt; by ID with Use --&gt;
  
  &lt;svg class="svg-item" viewBox="0 0 100 100"&gt;
    &lt;use xlink:href="#svg-test-reference" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><a href="http://codepen.io/itsjustluck/pen/WvvMXg" rel="nofollow">Live example on Codepen.io</a></p>