javascript - 当我将 SVG 内容绘制到 Canvas 时，SVG 被裁剪

Question

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

我知道问题不在于 Canvas 大小，因为我还首先将其他图像绘制到 Canvas 上(比文本更宽和更高)，没有任何问题。另一件奇怪的事情是，如果我拍摄图像并将其附加到 body 上，它会完美地出现。

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 是我的 DIV，它包含所有 SVG 代码。

编辑:为了提供更多细节，这是我在下面写的评论:我正在构建一个 JS 应用程序，让用户可以创建自定义足球。您可以更改球和文本的不同颜色和特征，因此它可以归结为带有一些 SVG 文本的几个 DIV(因为文本沿着弧形路径)。我可以获取 DIV 的背景图像并将其很好地绘制到 Canvas 上，以创建足球。当我尝试将文本绘制到 Canvas 上时遇到问题，因为它正在被裁剪。然后，我将采用该 Canvas 元素并将其转换为 PNG 以供用户保存。

我将文本向上和向左移动了更多，以便您可以更好地看到裁剪。如您所见，球画得很好。 http://i.imgur.com/Sngu4.png

Answer 1

我遇到了这个完全同样的问题，但我想我刚刚找到了解决方案。

仅在 SVG 元素上设置 width 和 height 是不够的。显然，您还需要设置 viewBox:

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

这应该在 Canvas 上正确渲染图像。 :)