Problems applying a clipPath to an Image element with transform

Question

For the life of me I can't figure out why SVG won't render the following graphic:

<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">
<clipPath id="randompath">
            <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"/>
</clipPath>
<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)"/>
</svg>

I've discovered the following two things:

• The image gets clipped properly when the clip-path is a basic circle.
• The image renders properly when the clip-path is not set.

A demo of the dysfunctional code is available here.

EDIT: The path inside the clipPath renders properly on its own. I suspect it won't render because according to this, the clip-Path is rendered relative to the image being clipped, not the viewbox.

Answer 1

SVG!=CSS. Once you set your viewbox units in SVG, those units usually override any units specified in the rest of the document (like those "px" in your <image>). SVG is reading those values of "500px" and as 500 ViewBox Units (which in your case are 1/600th's of a pixel (1636/623316), then applying the transform specified which scales it by 381x and moves it by 6096 viewbox units (aka about 10pixels) in x and y.

But your real problem is that the clipPath units are inheriting that transform (e.g. those clip units are being interpreted as units in a (623,316 x 381) width container!!)

If you redo your image dimensions using viewbox units, and get rid of the transform everything works. The following is only roughly approximate, you need to get your calculator out to get the real results - but it makes the point.

<image x="0" y="0" height="323000" width="150000" 
  xlink:href="http://www.cutepandapictures.com/wp-
  content/uploads/2012/07/babypandahugsatree.jpg"  clip-path="url(#randompath)"/>

Alternatively, divide all your clip path values by 500'ish, and you'll see a result that starts to make sense. Here's an example with the clip path numbers divided by 1,000 (it was easy to just move the decimal point): http://jsfiddle.net/reU7t/