当我将SVG内容绘制到画布上时，SVG会被裁剪。

Question

我有一堆SVG文本行需要绘制到画布上。我将SVG对象转换为SVG数据URI，将其应用于图像的源，然后将该图像绘制到画布上，但由于某种原因它在一定的宽度和高度后裁剪了文本。

我知道问题不是画布大小，因为我首先将其他比文本更宽和更高的图像绘制到画布上而没有任何问题。另一个奇怪的事情是，如果我将图像附加到主体上，它就完美无缺。

var imageText = new Image();
imageText.src = "data:image/svg+xml;base64," + btoa($("#text_container").html());
imageText.onload = function() { context.drawImage(imageText, 0, 0); };

#text_container是包含所有SVG代码的DIV。

编辑：为了提供更多细节，以下是我写的评论：我正在构建一个JS应用程序，让用户创建自定义足球。您可以更改球和文本的不同颜色和特征，因此它归结为几个带有一些SVG文本的DIV（因为文本沿着弧形路径）。 我可以将DIV的背景图像绘制到画布上，以创建足球。 当我尝试将文本绘制到画布上时，遇到问题，因为它被裁剪了。 然后，我将把该画布元素变成PNG供用户保存。

我将文本向上移动并向左移动，以便您更好地看到裁剪效果。正如您所见，球绘制得非常好。 http://i.imgur.com/Sngu4.png

- user1807782

---

你为什么要这样做？所有支持canvas的浏览器也都支持SVG。 - John Dvorak

我正在构建一个JS应用程序，让用户创建自定义足球。您可以更改球的不同颜色和特征以及文本，因此它归结为几个带有一些SVG文本的DIV（因为文本沿着弧形路径）。我可以将DIV的背景图像绘制到画布上，从而创建足球。当我尝试将文本绘制到画布上时，会出现被裁剪的问题。然后，我将把该画布元素转换为PNG供用户保存。 - user1807782

Answer 1

我曾经遇到过完全相同的问题，但现在我认为我找到了解决方法。

仅仅在SVG元素上设置宽度和高度是不够的。显然，您还需要设置viewBox。

<svg width="720" height="400" viewBox="0 0 720 400"></svg>

这将正确地在画布上呈现图像。 :)

- caleb531

Answer 2

假设context是您的画布渲染上下文（“2D”），您应该在context.drawImage()函数中包含“目标宽度”和“目标高度”参数：

context.drawImage(image, dx, dy, dw, dh)

如果myCanvas是你的canvas对象的id（$是jQuery的函数），你可以调用：

$(“#myCanvas”).

var dw = $('myCanvas').width();
var dh = $('myCanvas').height();
context.drawImage(image, 0, 0, dw, dh);

这将缩放图像以适应整个画布。我的建议是首先“查看”svg图像（即将其添加到主体并测量文本所在的坐标：sx、sy、sw和sh，在上面的链接中），因为您可能需要“有意地”裁剪它，以便将其定位到所需位置：

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

- Roimer

---

不行。它最终将文本块扩大了。 - user1807782

Answer 3

一个猜测... drawImage() 有一些可以设置的尺寸参数吗？也许它有一个默认的大小在绘制时进行裁剪。只是一个想法...

另外，由于您的图像是动态创建的，可能缺少一些通常包含在 .jpg 中的图像尺寸参数，这可能是 drawImage() 函数正在寻找的。

- Randy Hall