Создание холста поверх SVG (или другого изображения)

Question

Причина, по которой я задаю этот вопрос, заключается в том, что я хочу нарисовать стрелку между двумя изображениями SVG.Я хочу использовать canvas для создания стрелок, поэтому сначала я генерирую svgs, а затем помещаю холст поверх них, чтобы иметь возможность рисовать стрелки.

Я пробовал использовать style = ... но убежищеНе повезло, так как каждый раз, когда я добавляю элемент canvas, он просто помещает мои svg-изображения в другой pl

. Если нет простого способа сделать это, я просто создаю стрелки с использованием SVG, я подумал, что это будетЭффективно использовать холст, если мне нужно было сделать много стрел за короткий промежуток времени.

Answer 1

Вам нужно position:absolute на CSS для холста, чтобы вывести его из потока, а затем вы можете наложить его, как вам нравится, используя z-index.

Однако вместо этого я предлагаю вамиспользуйте один или два крошечных холста, чтобы создать стрелки, и используйте toDataURL() на них, чтобы создать URL, который вы можете использовать для тегов <image> в SVG.Таким образом, вся ваша графика в SVG, но вы можете использовать холст для сложных растровых эффектов, если вам нужно.

Answer 2

вы пробовали z-index? это полезный трюк css

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

РЕДАКТИРОВАТЬ: случайно облажались #s. Простите меня.