Мне нужно создать изображение холста, которое будет включать одно или несколько изображений SVG, созданных с использованием SVG.js.Чтобы сделать это, идея состоит в том, чтобы использовать библиотеку canvg с помощью функции drawsvg.Каждое из изображений SVG, которые я хотел бы импортировать, состоит из нескольких изображений 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`
В любом случае объект холста показывает только первое изображение PNG, включенное в изображение SVG.При просмотре console.log (svg_tag [0] .outerHTML) все остальные изображения SVG-изображения имеют нулевую ширину и высоту, а исходное преобразование, выполненное SVG.js, отсутствует.
Использованиеотладчик, это оригинальный SVG-образ, созданный SVG.js:
<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);
Спасибо большое.Я уже провел больше половины дня без успеха.