Canvas drawImage 仅绘制部分 SVG

Question

我有宽度约为 500、高度约为 300 的图表 SVG。我已经使用 SVG 中的 scale 属性对其进行了缩放。现在，当我尝试在 canvas 上绘制它时，它会从 SVG 的左上角绘制某些部分。如果我在浏览器中单独打开 SVG 文件，它会显示整个图像，我为 canvas 创建的图像标签也会显示整个图像。

我也尝试过使用不同的源和目标偏移量、宽度和高度，但没有用。

我现在不知道可能是什么问题。

以下是我更改了 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 header 语法是
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>

Canvas drawImage 仅绘制部分 SVG

Canvas drawImage draws only some part of SVG

svg

canvas

drawimage

cgcontextdrawimage