書き方 [SVG]

重なり順 (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 移行して気付いたこと | ジンジャー研究室