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

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

正如附注所示，支持最多的dataURI标头语法为
data:image/svg+xml; charset=utf8, + your_svg_markup。

此外，将序列化的svg标记设置为dataURI时，encodeURIComponent总是更好。

所以这是：

＆＃13;

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;

＆＃13;

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

＆＃13;

Canvas drawImage仅绘制SVG的某些部分

1 个答案: