title: Why is my clip-path not working when it's source is an svg?
body: <p>I'm following the <a href="https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content#Example.3A_Clipping" rel="nofollow">mozilla documentation</a> on using css <code>clip-path</code> property to apply an <code>svg clipPath</code> to an <code>HTMLElement</code>. But for some reason, it doesn't work for me, not in div's and not in images.</p>
  
  <p>In the documentation, it says you can easily clip an element with this code:</p>
  
  <pre><code>&lt;style&gt;.target { clip-path: url(#c1); }&lt;/style&gt;
  &lt;svg:svg height="0"&gt;
    &lt;svg:clipPath id="c1" clipPathUnits="objectBoundingBox"&gt;
      &lt;svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/&gt;
      &lt;svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/&gt;
    &lt;/svg:clipPath&gt;
  &lt;/svg:svg&gt;
  </code></pre>
  
  <p>And I've tried that, but it doesn't work. The <code>clip-path</code> property works with predefined methods like polygon() and ellipse() but it won't work with a linked svg.</p>
  
  <p>I made a <a href="http://jsfiddle.net/8qyxjL7y/3/" rel="nofollow">JSFiddle</a> illustrating my problem, hopefully you can find my mistake :)</p>