在SVG（或其他图像）的顶部创建画布 [英] Creating a canvas on top of an SVG (or other image)

问题描述

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

The reason for asking this question is because I want to be able to draw an arrow between two svg images. I want to use canvas to create the arrows, so firstly I generate the svgs then place a canvas on top of them to be able to draw the arrows.

尝试使用style = ...但没有任何运气，因为每次我添加的画布元素，它只是把我的svg图像到另一个pl

I've tried using style=... but haven't had any luck as everytime I add the canvas element it just pushes my svg images to another pl

如果没有简单的方法为了做到这一点，我将使用SVG创建箭头，我想如果我在很短的时间内使用大量的箭头，使用画布会更有效。

If there's no easy way to do this I'll just create arrows using SVG, I figured it would be more efficient to use canvas if I had to do lots of arrows in a short amount of time.

推荐答案

在CSS上你需要 position：absolute ，让canvas从流中取出，然后你可以你喜欢使用 z-index 。

You need position:absolute on the CSS for the canvas to take it out of the flow, and then you can layer it as you like using z-index.

但是，我建议你可以使用一个或两个小画布创建箭头并使用 toDataURL（）创建一个可用于< image> 标签的网址在SVG中。这样，所有的图形都在SVG中，但如果需要，您可以使用canvas来获得复杂的光栅效果。

However, I instead suggest that you can use one or two tiny canvases to create the arrowheads and use toDataURL() on them to create a url you can use for <image> tags in the SVG. This way all your graphics are in SVG but you can use the canvas for complex raster effects if you need to.

这篇关于在SVG（或其他图像）的顶部创建画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！