Html 在SVG(或其他图像)上创建画布

Html 在SVG(或其他图像)上创建画布,html,canvas,svg,Html,Canvas,Svg,问这个问题的原因是因为我希望能够在两个svg图像之间画一个箭头。我想使用画布来创建箭头,因此首先生成SVG,然后在它们上面放置画布,以便能够绘制箭头 我尝试过使用style=。。。但我没有任何运气,因为每次我添加canvas元素时,它都会将我的svg图像推送到另一个pl 如果没有简单的方法,我将使用SVG创建箭头,我认为如果我必须在短时间内创建大量箭头,那么使用画布会更有效。您尝试过z-index吗?这是一个有用的css技巧 #svgcontent { z-index:1 } #html5con

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

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


如果没有简单的方法,我将使用SVG创建箭头,我认为如果我必须在短时间内创建大量箭头,那么使用画布会更有效。

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

#svgcontent { z-index:1 } #html5content { z-index:3 } #SVG内容 { z指数:1 } #HTML5内容 { z指数:3 }
编辑:不小心把#s搞砸了请告诉我。

您需要在CSS上放置
位置:absolute
,以便画布将其从流中取出,然后您可以使用
z-index
将其分层

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