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

Question

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

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

如果没有简单的方法可以做到这一点，我只会使用SVG创建箭头，我认为如果我不得不在很短的时间内做很多箭头，那么使用canvas会更有效。

Answer 1

您需要在CSS上使用position:absolute将画布从流中取出，然后您可以使用z-index按照自己的喜好对其进行分层。

但是，我建议您可以使用一个或两个小画布来创建箭头，并使用toDataURL()创建一个可用于SVG中<image>标记的网址。这样，所有图形都在SVG中，但如果需要，可以使用画布进行复杂的栅格效果。

Answer 2

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

#svgcontent
{
z-index:1
}
#html5content
{
z-index:3
}

编辑：意外地将#s搞砸了。 “对不起。