Canvas drawImage仅绘制SVG的一部分

我有一张SVG图表，宽约500，高约300。 我已经在SVG中使用scale属性对其进行了缩放。 现在，当我尝试在画布上绘制它时，它在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;

var data='数据：image/svg+xml；utf8'；
变量画布=$（“”）；
$（画布）.appendTo（'body'）.css（'position'，'absolute'）.css（'top'，0）；
var图像=新图像；
$（图像）.appendTo（“正文”）
.宽度（默认ZoomWidth）.高度（360）
.css（“位置”，“固定”）.css（“顶部”，“400px”）；
image.onload=函数（）{
setTimeout（函数（）{
var context=canvas.get（0.getContext（“2d”）；
drawImage（image，0,0）；
}, 1000);
};
image.src=数据；

您的问题是必须在

节点上设置绝对

宽度

和

高度

属性，而不是百分比，如果没有设置（

100%

），这将是默认值

作为旁注，最受支持的dataURI头语法是

数据：image/svg+xml；charset=utf8，

+您的svg标记

另外，将序列化的svg标记设置为dataURI时，最好使用

encodeURIComponent

svg标记

这就是：

var svgString=''；
var data='data:image/svg+xml；字符集=utf8，'+encodeURIComponent（svgString）；
变量画布=$（“”）；
$（画布）.appendTo（'body'）.css（'position'，'absolute'）.css（'top'，0）；
var图像=新图像；
image.onload=函数（）{
var context=canvas.get（0.getContext（“2d”）；
drawImage（image，0,0）；
};
image.src=数据
您好，我添加了示例代码。我在这里更改了SVG。注意：-这也会裁剪图像，但当我提供源和目标偏移量、宽度和高度时，会显示完整的SVG。不幸的是，它对我的SVG没有帮助。谢谢@Kaildo。你的解决方案真的奏效了。问题在于，我没有将宽度和高度作为SVG的属性，而是将它们设置为样式。谢谢。