Question

我发现将raphael SVG转换为canvas元素的信息非常有用。但我有点卡住了 - 我画了拉斐尔SVG（它有点难看，对不起，但它确实有效），我几乎可以通过canvg在画布上重新创建它，除了我的填充图案都是黑色的。在呈现的SVG代码中有什么问题吗？

以下是我的raphael绘图的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>

我正在使用以下内容尝试在画布中重新创建我的SVG：

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

我的图案画得很好，我的背景填充色很好，只是我画的图案上的图像填充不合适;他们总是黑的。我试过通过完整网址引用它们，亲戚，它没有任何区别。此页面上没有基本元标记。关于我错在哪里的想法？

Answer 1

尝试将href替换为xlink:href

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

或者...

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

背景图片填充拉斐尔SVG到画布通过canvg是黑色的

1 个答案: