背景图像通过canvg将Raphael SVG填充到画布上为黑色

我发现这里关于将raphael SVG转换为画布元素的信息非常有用。但我有点卡住了-我画了一个拉斐尔SVG，有点难看，抱歉，但它可以工作，我几乎可以通过canvg在画布上重新创建它，除了我的填充图案都是黑色。呈现的SVG代码中是否有错误

以下是我的拉斐尔绘画中的svg代码innerHTML示例：

<svg height="530" version="1.1" width="530" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow-x: hidden; overflow-y: hidden; position: relative; "><desc>Created with Raphaël 2.0.0</desc><defs><pattern id="BDC4C7DB-1FF9-4BE5-B868-C7B68C6A7B8B" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1" patternTransform="matrix(1,0,0,1,0,0) translate(535.9612108001184,76)"><image x="0" y="0" href="assets/img/crush_gloss/coral_bell_gloss.jpg"></image></pattern><pattern id="75CC740F-C521-4E46-BE6F-2CE15E4CD6D4" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1" patternTransform="matrix(1,0,0,1,0,0) translate(-31.03878919988169,426)"><image x="0" y="0" href="assets/img/crush_gloss/coral_bell_gloss.jpg"></image></pattern><pattern id="70CBF480-046A-4F7D-8B41-FD642EC8109B" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1" patternTransform="matrix(1,0,0,1,0,0) translate(265.9612108001183,76)"><image x="0" y="0" href="assets/img/crush_gloss/habenero_gloss.jpg"></image></pattern><pattern id="146B2DC3-E4B5-4959-BFCD-6A6CF69E3300" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1" patternTransform="matrix(1,0,0,1,0,0) translate(238.96121080011827,26)"><image x="0" y="0" href="assets/img/crush_gloss/coral_bell_gloss.jpg"></image></pattern> ... AND ON ... </defs></svg>

我的图案画得很好，我的背景填充颜色很好，只是我画的图案上的图像填充不好；它们总是黑色的。我试着通过完整的url引用它们，相对而言，这没有什么区别。此页上没有基本元标记。想想我错在哪里

尝试将href替换为xlink:href

尝试将href替换为xlink:href

---

我希望是这样-我注意到人们报告的xlink:href=是正确规范的一些问题。但这对我不起作用。我仍然展示我的优秀图案，但黑色填充。：/我已经做了一个我正在做的演示，首先svg只画了一个带有图像填充的圆圈，然后尝试转换成画布，这样我就有了一个png，我可以用它做一些事情——我似乎无法让图像填充工作。即使复制字符串并将其缩减为最小有效表达式，它仍然不会显示图像，因此我怀疑canvg中存在错误。我看到您正在使用canvg trunk的开发版本，或许可以尝试用旧版本替换它。我希望是这样-我注意到人们报告的xlink:href=是正确规范的一些问题。但这对我不起作用。我仍然展示我的优秀图案，但黑色填充。：/我已经做了一个我正在做的演示，首先svg只画了一个带有图像填充的圆圈，然后尝试转换成画布，这样我就有了一个png，我可以用它做一些事情——我似乎无法让图像填充工作。即使复制字符串并将其缩减为最小有效表达式，它仍然不会显示图像，因此我怀疑canvg中存在错误。我看到您正在使用canvg trunk的开发版本，也许可以尝试用旧版本替换它。

innerSVG=document.getElementById('app_display').innerHTML;
//alert (innerSVG);
// load svg snippet in the canvas  
canvg('canv', innerSVG);

<image x="0" y="0" xlink:href="assets/img/crush_gloss/coral_bell_gloss.jpg"></image>

canvg('canv', innerSVG.replace("href","xlink:href"));