SVG（または他の画像）の上にキャンバスを作成する

Question

この質問をするのは、2つのSVG画像の間に矢印を描きたいからです。私は矢印を作成するためにキャンバスを使用したいので、最初にsvgsを生成し、矢印を描画できるようにキャンバスを上に置きます。

私は=スタイルを使用してみました...しかし、毎回のように、私はこの私を行うには簡単な方法はありません場合は、それだけで別のPL

に私のSVG画像をプッシュcanvas要素を追加したすべての運を持っていませんでしたSVGを使って矢印を作成するだけで、短い時間でたくさんの矢印をやらなければならない場合、キャンバスを使う方が効率的だと思いました。

Answer 1

キャンバスでフローから外してもらうには、が必要です。z-indexを好きなように重ねることができます。

しかし、代わりに1,2個の小さなキャンバスを使って矢印を作成し、toDataURL()を使用してSVGの<image>タグに使用できるURLを作成することをお勧めします。このように、すべてのグラフィックスはSVGにありますが、必要に応じてキャンバスを使用して複雑なラスタ効果を作成することができます。

Answer 2

あなたはz-indexを試しましたか？それは便利なCSSのトリックです

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

EDIT：誤って#sを締めました。 'すみません。