title: Problems applying a clipPath to an Image element with transform
body: <p>For the life of me I can't figure out why SVG won't render the following graphic:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1636px" height="911px" viewBox="0 0 623316 347091"&gt;
  &lt;clipPath id="randompath"&gt;
              &lt;path d="M 6096 82296 C 6096 40211.90206289354 48740.87757861691 6096 101345.99999999999 6095.999999999988 153951.12242138304 6095.999999999977 196596.00000000003 40211.9020628935 196596.00000000003 82295.99999999996 196596.00000000003 124380.09793710642 153951.1224213831 158495.99999999997 101346.00000000001 158495.99999999997 48740.87757861695 158495.99999999997 6096.000000000012 124380.09793710642 6096 82295.99999999997 Z"/&gt;
  &lt;/clipPath&gt;
  &lt;image x="0" y="0" height="500px" width="500px" xlink:href="http://www.cutepandapictures.com/wp-content/uploads/2012/07/babypandahugsatree.jpg" transform="matrix(381,0,0,381,6096,6096)" clip-path="url(#randompath)"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I've discovered the following two things:</p>
  
  <ul>
  <li>The image gets clipped properly when the clip-path is a basic circle.</li>
  <li>The image renders properly when the clip-path is not set. </li>
  </ul>
  
  <p>A demo of the dysfunctional code is available <a href="http://jsfiddle.net/rw6R2/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>EDIT: The path inside the clipPath renders properly on its own. I suspect it won't render because according to <a href="https://stackoverflow.com/questions/17388689/svg-clippath-and-transformations">this</a>, the clip-Path is rendered relative to the image being clipped, not the viewbox.</p>