Question

我需要创建一个画布图像，其中将包含一个或多个使用SVG.js创建的SVG图像。为此，我们的想法是通过drawsvg函数使用canvg库。我要导入的每张SVG图像均由几张png图像组成，在每张png图像上均已应用了SVG.js库进行的几种转换（移动，缩放，旋转）。这里的代码； svg_tag [0]是我想转换为画布对象的原始svg图像：

var svg_tag = $( "#" + shelf_id ).children("svg");
var dw = svg_tag.attr( "width" );
var dh = svg_tag.attr( "height" );
var id_svg = svg_tag.attr( "id" );

console.log(svg_tag[0].outerHTML);
console.log("getImage: shelf_id: " + shelf_id + " id_svg: " + id_svg + " dw: " + dw + " dh: " + dh);

$("#canvas").attr("width",dw + "px"); // set new canvas width
$("#canvas").attr("height",dh + "px"); // set new canvas height

var canvas = document.getElementById('canvas');
//canvg(canvas, svg_tag[0].outerHTML)
var ctx = canvas.getContext('2d');

// https://www.w3.org/TR/2dcontext/#dom-context-2d-drawimage
ctx.drawSvg(svg_tag[0].outerHTML, 0, 0, dw, dh); // it is printed only the shelf`

无论如何，canvas对象仅显示SVG图像中包含的第一个PNG图像。查看console.log（svg_tag [0] .outerHTML），SVG图像的所有其他图像的宽度和高度均设置为零，并且不存在SVG.js进行的原始转换。

使用调试器，这是SVG.js创建的原始SVG映像：

<svg id="SvgjsSvg1007" xmlns="http://www.w3.org/2000/svg" version="1.1" width="900" height="663" xmlns:xlink="http://www.w3.org/1999/xlink"><image id="SvgjsImage1009" xlink:href="layout/PSS_16II_shelf.png" width="900" height="663"></image><image id="SvgjsImage1010" xlink:href="layout/8DG62445AA - IROADMV.png" width="1427" height="81" data-card_name="IROADMV" data-info="APN: 8DG62445AB node: MERKS_G-1-ON-1 linename: MERKS_G-1-ON-1@2 card_id: gui-59104" transform="scale(0.49614576033637003 0.4691358024691358) translate(98.76129943502825 554.2105263157895)"></image><image id="SvgjsImage1011" xlink:href="layout/8DG62445AA - IROADMV.png" width="1427" height="81" data-card_name="IROADMV" data-info="APN: 8DG62445AB node: MERKS_G-1-ON-1 linename: MERKS_G-1-ON-1@1 card_id: gui-59094" transform="scale(0.49614576033637003 0.4691358024691358) translate(98.76129943502825 645.8684210526316)"></image> ....  <defs id="SvgjsDefs1008"></defs></svg>

无论如何console.log会显示以下内容：

<svg id="SvgjsSvg1007" xmlns="http://www.w3.org/2000/svg" version="1.1" width="900" height="663" xmlns:xlink="http://www.w3.org/1999/xlink"><image id="SvgjsImage1009" xlink:href="layout/PSS_16II_shelf.png" width="900" height="663"></image><image id="SvgjsImage1010" xlink:href="layout/8DG62445AA - IROADMV.png" width="0" height="0" data-card_name="IROADMV" data-info="APN: 8DG62445AB node: MERKS_G-1-ON-1 linename: MERKS_G-1-ON-1@2 card_id: gui-59104"></image><image id="SvgjsImage1011" xlink:href="layout/8DG62445AA - IROADMV.png" width="0" height="0" data-card_name="IROADMV" data-info="APN: 8DG62445AB node: MERKS_G-1-ON-1 linename: MERKS_G-1-ON-1@1 card_id: gui-59094"></image><image id="SvgjsImage1012" xlink:href="layout/WTOCM-F.png" width="0" height="0" data-card_name="WTOCM-F" data-info="APN: 8DG61330AA node: MERKS_G-1-ON-1 card_id: gui-59095"></image> ... <defs id="SvgjsDefs1008"></defs></svg></svg>

我做了很多测试，没有弄清楚问题出在哪里。我试图克隆原始的svg节点：

var copy = svg_tag[0].cloneNode(true);

，没有任何结果。使其正常工作的唯一方法是手动复制并粘贴原始的svg标记，如上所示，该标记为函数中的字符串：

canvg(canvas, '<svg id="SvgjsSvg1007"  ....   </svg>');

使用js的方式是哪种，下面的代码不起作用：

canvg(canvas, copy.outerHTML);

非常感谢。我已经花了超过半天的时间才成功。

从使用SVG.js创建的SVG图像创建画布图像

0 个答案: