在 SVG（或其他图像）上创建画布答案

【问题标题】：Creating a canvas on top of an SVG (or other image)在 SVG（或其他图像）上创建画布
【发布时间】：2011-06-06 07:28:04
【问题描述】：

问这个问题的原因是因为我希望能够在两个 svg 图像之间画一个箭头。我想使用画布来创建箭头，所以首先我生成 svgs 然后在它们上面放置一个画布以便能够绘制箭头。

我尝试过使用 style=... 但没有任何运气，因为每次我添加 canvas 元素时，它只会将我的 svg 图像推送到另一个 pl

如果没有简单的方法可以做到这一点，我将只使用 SVG 创建箭头，我认为如果我必须在短时间内制作大量箭头，使用画布会更有效。

【问题讨论】：

【解决方案1】：

您需要在 CSS 上使用 position:absolute 才能将画布从流中取出，然后您可以使用 z-index 随意分层。

但是，我建议您可以使用一两个小画布来创建箭头，并在它们上使用 toDataURL() 来创建可用于 SVG 中 <image> 标记的 URL。这样，您的所有图形都在 SVG 中，但如果需要，您可以使用画布实现复杂的光栅效果。

【讨论】：

【解决方案2】：

您尝试过 z-index 吗？这是一个有用的 CSS 技巧

#svg内容 { z-索引：1 } #html5内容 { z-索引：3 }

编辑：不小心把#s 搞砸了。对不起。

【讨论】：