重なり順 (z-index)

  • SVG 内における要素の重なり順は、後にある要素が上になる。
  • HTML 内で順序を入れ替える場合は、div 要素に入れて z-index を指定する。

参考:

SVG オブジェクトの重なり統制が不完全なことへの対処 | jnobuyuki のブログ

SVG の重なり順序を JavaScript で制御する「svg-z-order」| 銀の弾丸

SVG z-index | CodePen

How to use z-index in svg elements? – Stack Overflow

svg-z-order

JavaScript で SVG の重なり順を扱うためのライブラリ

参考:

takamin/svg-z-order: A module to manipulate the Z-Order of a SVG element – GitHub

SVG の重なり順序を JavaScript で制御する「svg-z-order」| 銀の弾丸

Vue で重なり順を扱う

参考:

Vue.js と SVG の z-index – Qiita

D3.js で重なり順を扱う

参考:

Updating SVG Element Z-Index With D3 – Stack Overflow

xml:space

**DEPRECATED** (SVG 2 で廃止)

参考:

xml:space | MDN

Tips

参考:

Inline SVG を使うにあたってつまづいたところ | ハックノート

DIV ⇒ SVG 移行して気付いたこと | ジンジャー研究室

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です