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

У меня есть диаграмма SVG шириной около 500 и высотой около 300. Я масштабировал ее, используя атрибут масштаба в 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;

canvas svg cgcontextdrawimage drawimage
person Nitesh Phadatare    schedule 06.04.2016    source источник
comment
Здравствуйте, я добавил пример кода. Я изменил SVG здесь. ПРИМЕЧАНИЕ. Это также обрезает изображение, но показывает полный SVG, когда я указываю исходное и целевое смещения, ширину и высоту. К сожалению, это не помогает мне с моим SVG.   -  person Nitesh Phadatare    schedule 07.04.2016

Ответы (1)


arrow_upward
3
arrow_downward

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

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

Кроме того, всегда лучше encodeURIComponent использовать сериализованную разметку svg при установке ее в качестве dataURI.

Итак, вот оно:

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>

person Kaiido    schedule 07.04.2016
comment
Спасибо @Kaildo. Ваше решение действительно сработало. Что было не так, так это то, что я не задавал ширину и высоту в качестве атрибутов SVG, а устанавливал их в стиле. Большое спасибо. - person Nitesh Phadatare; 07.04.2016