Canvas drawImage рисует только часть SVG

Question

У меня есть график SVG шириной около 500 и высотой около 300. Я масштабировал его с помощью атрибута scale в SVG. Теперь, когда я попробовал рисовать его на холсте, он рисует какую-то часть из левого верхнего угла SVG. Если я открываю SVG-файл отдельно в браузере, он показывает все изображение, также тег изображения, который я создал для холста, также показывает полное изображение.

Я также попытался использовать разные смещения источника и места назначения, ширину и высоту, но это не сработало.

Я не знаю, что может быть проблемой.

Ниже приведен пример кода примера, где я изменил SVG.

ПРИМЕЧАНИЕ: - это также обрезает изображение, но показывает полный SVG, когда я предоставляю исходные и целевые смещения, ширину и высоту. К несчастью, это не помогает мне с моим SVG.

var data = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><rect width="1000" height="350" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)" /></svg>'; 

var canvas = $("<canvas width='1024' height='360' style=\"border: 1px solid red;\">"); 
$(canvas).appendTo('body').css('position', 'absolute').css('top', 0); 
var image = new Image; 
$(image).appendTo("body") 
    .width(defaultZoomWidth).height(360) 
    .css("position", "fixed").css("top", "400px"); 
image.onload = function() { 
    setTimeout(function(){ 
     var context = canvas.get(0).getContext("2d"); 
     context.drawImage(image, 0, 0); 
    }, 1000); 
}; 
image.src = data; 

Answer 1

Ваш вопрос в том, что вы MUST набор абсолютных width и height атрибуты на <svg> узле, а не проценты, которые будут по умолчанию, если ничего не установлено (100%).

В качестве сторонних примечаний наиболее поддерживаемый синтаксис заголовка dataURI равен
data:image/svg+xml; charset=utf8, + your_svg_markup.

Кроме того, при настройке в качестве dataURI всегда должно быть encodeURIComponent вашей сериализованной svg-разметкой.

Так вот:

var svgString = '<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" version="1.1"><rect width="1000" height="350" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)" /></svg>'; 
 

 
var data = 'data:image/svg+xml; charset=utf8, '+ encodeURIComponent(svgString); 
 

 
var canvas = $("<canvas width='1024' height='360' style=\"border: 1px solid red;\">"); 
 
$(canvas).appendTo('body').css('position', 'absolute').css('top', 0); 
 
var image = new Image; 
 
image.onload = function() { 
 
    var context = canvas.get(0).getContext("2d"); 
 
    context.drawImage(image, 0, 0); 
 
}; 
 
image.src = data;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>