SVG/tips/重ね合わせについて - 豚吐露＠wiki

重ね合わせについて

基本ルール

svgの重ね合わせは原則、後に描画したものが上に乗るというルール。

svg構造	追加順
svg └ g     ├ path1     ├ path2     └ path3	① ② ③ ④ ⑤

という構造で丸数字の順に追加していった場合、以下のようになる。

ところが後から追加したものでも、下に書きたい状況になったりする。

重ね合わせの制御

そういう場合は、gタグなどを使って、予め重ね合わせる順番を定義しておくと良い。
後から追加したものが上に乗るというのは、1つのlayerの中の話であって、layerが異なればその限りではない。

svg構造	追加順
svg ├ g1 │ ├ path11 │ ├ path12 │ └ path13 └ g2     ├ path21     └ path22	① ② ⑥ ⑦ ⑧ ③ ④ ⑤

上記のように先にsvg→g1→g2と先に定義しておいて、g1、g2に後からpathを追加すると、path2xは必ずpath1xの上に来るように配置される

なので、複雑な構造をsvgで書きたい場合、予めgタグで重なり順を定義しておいて、その後contentsを乗っけていくのが良い。

---

更新日： 2022年12月01日 (木) 09時11分01秒