私の人生では、SVG が次のグラフィックをレンダリングしない理由がわかりません。
<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>
次の2つのことを発見しました。
- クリップパスが基本的な円の場合、画像は適切にクリップされます。
- クリップパスが設定されていない場合、画像は適切にレンダリングされます。
機能不全のコードのデモは、こちらから入手できます。
編集: clipPath 内のパスは、単独で適切にレンダリングされます。thisによると、clip-Pathはビューボックスではなく、クリップされている画像に対して相対的にレンダリングされるため、レンダリングされないと思われます。