对于我的生活，我无法弄清楚为什么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>
我发现了以下两件事：
- 当剪辑路径为基本圆时，图像将被正确剪裁。
- 未设置剪辑路径时，图像将正确呈现。
此处提供了功能失调代码的演示。
编辑：clipPath内的路径可以自行正确呈现。我怀疑它不会渲染，因为根据这一点，clip-Path 是相对于被剪辑的图像而不是视图框渲染的。
SVG！=CSS.在 SVG 中设置视图框单位后，这些单位通常会覆盖文档其余部分指定的任何单位（如<image>中的那些"px"）。SVG 读取"500px"的值和 500 个 ViewBox 单位（在您的例子中是像素的 1/600 （1636/623316），然后应用指定的转换，该变换在 x 和 y 中将其缩放 381 倍并将其移动 6096 个视图框单位（也称为约 10 像素）。
但您真正的问题是 clipPath 单元继承了该转换（例如，这些剪辑单元被解释为 （623，316 x 381） 宽度容器中的单元！！
如果您使用视框单位重做图像尺寸，并摆脱变换，一切正常。以下内容只是大致的近似值，您需要拿出计算器才能获得真正的结果 - 但它说明了问题。
<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)"/>
剪辑路径值除以 500'ish，您将看到一个开始有意义的结果。下面是一个剪辑路径号除以 1，000 的示例（只需移动小数点很容易）： http://jsfiddle.net/reU7t/