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

canvas html5 svg
SVG(またはその他の画像)の上にキャンバスを作成する

この質問をする理由は、2つのsvg画像の間に矢印を描画できるようにするためです。 キャンバスを使用して矢印を作成したいので、まずsvgを生成してから、その上にキャンバスを配置して矢印を描画できるようにします。

style = …​を使用してみました しかし、キャンバス要素を追加するたびにsvg画像を別のplにプッシュするだけなので、運はありません

これを行う簡単な方法がない場合は、SVGを使用して矢印を作成するだけです。短時間で多くの矢印を実行する必要がある場合、キャンバスを使用する方が効率的であると考えました。

  4  2


ベストアンサー

フローからキャンバスを取り出すには、CSSの position:absolute`が必要です。そして、 z-index`を使用して、好きなようにレイヤー化できます。

ただし、代わりに、1つまたは2つの小さなキャンバスを使用して矢じりを作成し、それらに `toDataURL()`を使用して、SVGの “タグに使用できるURLを作成することをお勧めします。 これにより、すべてのグラフィックがSVGになりますが、必要に応じて、キャンバスを使用して複雑なラスター効果を得ることができます。

6


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

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

編集:誤って#sを台無しにしました。 ‘すみません。

1


タイトルとURLをコピーしました