1

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

1 回答 1

3

您的问题是您必须在节点上设置绝对值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>

于 2016-04-07T04:39:30.073 回答