Canvas drawImage 仅绘制 SVG 的一部分

Question

我的图表 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;

Answer 1

您的问题是您必须在<svg> 节点上设置绝对width 和height 属性，而不是百分比，如果没有设置，这将是默认值 (100%) .

作为旁注，最受支持的 dataURI 标头语法是
data:image/svg+xml; charset=utf8, + your_svg_markup。

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

所以这里是：

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>