SVG (또는 다른 이미지) 위에 캔버스 만들기

Question

이 질문을하는 이유는 두 개의 svg 이미지 사이에 화살표를 그릴 수 있기를 원하기 때문입니다. 저는 캔버스를 사용하여 화살표를 만들고 싶기 때문에 먼저 SVG를 생성 한 다음 화살표를 그릴 수 있도록 캔버스를 그 위에 놓습니다.

나는 스타일을 사용하여 시도했다 = ...하지만 난 그냥 다른 PL

이 내가 할 수있는 쉬운 방법이없는 경우에 내 SVG 이미지를 밀어 캔버스 요소를 추가 매번로 운이 없었어요 SVG를 사용하여 화살표를 만들면, 짧은 시간에 많은 화살표를해야한다면 캔버스를 사용하는 것이 더 효율적이라고 생각했습니다.

Answer 1

캔버스가 흐름에서 꺼내기 위해 CSS에 position:absolute이 필요하다면 z-index을 사용하여 원하는대로 레이어를 지정할 수 있습니다.

그러나 대신 한두 개의 작은 캔버스를 사용하여 화살촉을 만들고 toDataURL()을 사용하여 SVG의 <image> 태그에 사용할 수있는 URL을 만들 것을 제안합니다. 이렇게하면 모든 그래픽이 SVG에 있지만 필요한 경우 복잡한 래스터 효과에 캔버스를 사용할 수 있습니다.

Answer 2

z- 색인을 사용해 보셨습니까? 유용한 CSS 트릭입니다.

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

EDIT : 우연히 #s를 망쳤습니다. '실례합니다.