title: Problems with SVG clip-path using HTML and CSS
body: <p>I've been trying to understand how to apply SVG clip-paths to HTML elements, and have run into some oddities.</p>
  
  <p>Here is the fiddle: <a href="http://jsfiddle.net/jakemcgraw/8hr99/" rel="nofollow">http://jsfiddle.net/jakemcgraw/8hr99/</a></p>
  
  <pre><code>&lt;div id="diamond1" class="diamond"&gt;
      &lt;div id="clip1"&gt;
          &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="diamond2" class="diamond"&gt;
      &lt;div id="clip2"&gt;
          &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="diamond3" class="diamond"&gt;
      &lt;div id="clip3"&gt;
          &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;svg&gt;
      &lt;defs&gt;
          &lt;clippath id="relative_path"&gt;
              &lt;polygon points="50% 0, 100% 50%, 50% 100%, 0 50%"&gt;&lt;/polygon&gt;
          &lt;/clippath&gt;
      &lt;/defs&gt;
  &lt;/svg&gt;
  &lt;svg&gt;
      &lt;defs&gt;
          &lt;clippath id="absolute_path"&gt;
              &lt;polygon points="100 0, 200 100, 100 200, 0 100"&gt;&lt;/polygon&gt;
          &lt;/clippath&gt;
      &lt;/defs&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#clip1 {
      -webkit-clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% );
      -moz-clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% );
      -o-clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% );
      clip-path: polygon( 50% 0, 100% 50%, 50% 100%, 0 50% );
  }
  
  #clip2 {
      -webkit-clip-path: url(#relative_path);
      -moz-clip-path: url(#relative_path);
      -o-clip-path: url(#relative_path);
      clip-path: url(#relative_path);
  }
  
  #clip3 {
      -webkit-clip-path: url(#absolute_path);
      -moz-clip-path: url(#absolute_path);
      -o-clip-path: url(#absolute_path);
      clip-path: url(#absolute_path);
  }
  </code></pre>
  
  <p>A few things to note:</p>
  
  <ol>
  <li><p>The inline clip-path css declaration only works with Chrome and Opera.</p></li>
  <li><p>SVG with relative dimensions (i.e. 50%) doesn't seem to work for any browser at all.</p></li>
  <li><p>SVG with absolute dimensions only works in Firefox.</p></li>
  </ol>
  
  <p>Note that the second and third elements disappear completely in Chrome and Opera.  Now, take a look at this fiddle: <a href="http://jsfiddle.net/jakemcgraw/7S5Lk/" rel="nofollow">http://jsfiddle.net/jakemcgraw/7S5Lk/</a></p>
  
  <p>The one works correctly in Firefox, but in Chrome and Opera, the 10px margin has moved the underlying element, but NOT the clip.  It appears that the SVG clipPath dimensions are applying to the document <em>as a whole</em>, as opposed to the element in question.</p>
  
  <p>Unsurprisingly, neither of these two fiddles work in IE10.  I have seen SVG work in IE10, so perhaps the only problem is the mixing of SVG and HTML?  Not sure.</p>
  
  <p>Note as well that <em>neither</em> work in Safari.</p>
  
  <p>Is my implementation wrong?  Is there a proper way to mix SVG clip-paths with HTML elements that I'm missing?</p>