SVGのz-indexが効かない？パスの重なり順を直す
SVGのz-indexを上げてもパスが前に出ない場合は、要素順を確認します。同じ紋章の並べ替え前後を比較し、グループと書き出したファイルを検証します。
CSSのz-indexを上げてもSVGのパスが別の形状の後ろに残る場合は、SVG内の要素の順序を確認してください。通常のSVGの描画順では、先の形状が先に描かれ、後の形状が覆います。パスを前に出すには、覆いたい形状の後に配置します。SVGの描画モデルは、この順序を定義しています。
まず重なりがどこで起きているかを確定します。SVG全体がページのヘッダーの後ろにあるならHTMLレイアウトの問題です。同じSVG内の2つの形状なら、図形の順序の問題です。以下の修正は後者を扱います。
CSSを変える前にレイヤーを確認する
- 1つのSVG内の2つのパス： マークアップか編集ソフトのレイヤーパネルで順序を確認します。
- SVG全体がページ要素の後ろにある場合： 周囲のHTMLボックスと重ね合わせコンテキストを確認します。
- ストロークが自身の塗りを覆う場合： オブジェクトを動かさずpaint-orderを確認します。
1つの紋章で違いを見る
私たちはオレンジの星、青い円、緑のリボンからなるオリジナルの3部分の紋章を描きました。左のパネルでは、星がSVGの先頭にあり、CSSのposition: relativeとz-index: 999を持ちます。ブラウザーはそのz-index値を計算しますが、後の円とリボンが星を覆います。右のパネルは要素順だけを変えています。同じ星が最後にあり、前に見えます。
テストにはHeadlessChrome 141と1200 × 680のスクリーンショットを使いました。報告された子要素順は左が星、円、リボンで、右が円、リボン、星でした。通常の重なるSVG子要素に対する限定的なテストで、すべてのレンダラー、入れ子グループ、効果についての約束ではありません。
SVGファイルの順序を直す
SVGの元データをテキストエディターで開くか、ベクター編集ソフトでオブジェクトを確認します。重なる形状を探し、ファイル内で上から下へ読んでください。先にある兄弟要素が先に描かれます。前に見せたいオブジェクトを、覆いたいオブジェクトの後へ移し、コピーを保存します。
たとえば、この単純化した図では星が最後です。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160">
<circle cx="120" cy="80" r="55" fill="#4f86df"/>
<path d="M20 90 Q110 60 220 100 L220 125 Q110 85 20 115Z"
fill="#22a79a"/>
<path id="star" d="M120 20 L135 60 175 62 145 88 155 130
120 108 85 130 95 88 65 62 105 60Z"
fill="#ff8c64"/>
</svg>この修正では、パスデータも塗り色も変える必要がありません。デザインアプリにBring to Front（最前面へ）コマンドがあれば、その後にSVGを書き出し、保存したマークアップを確認するか開き直してください。編集ソフトのレイヤーパネルは役立ちますが、次のレンダラーが読むのは納品ファイルです。
対話的なSVGでは、JavaScriptで既存の子要素を現在の親の最後に移せます。
const star = document.querySelector("#star");
star.parentNode.appendChild(star);MDNのappendChildリファレンスは、既存ノードを追加するとコピーを作らず移動することを確認しています。DOM変更がアプリの一部である場合だけ使ってください。静的なロゴファイルは通常、意図する順をSVG自体に書いた方が分かりやすくなります。
グループ、穴、他の種類の順序を確認する
星がグループに属するなら、そのグループ内で最後にしても、グループ全体は後の兄弟グループの後ろに残る場合があります。親の構造を確認します。まとまった図形全体を前に出すなら該当するグループを移し、グループ内の部分だけが重なるなら子要素を並べ替えます。子をグループ外へ出すときは注意してください。グループが変換、クリッピング、不透明度、マスクを持つ場合があります。SVGの描画モデルのグループの説明は、グループ内容がまとめて描画される理由を説明しています。
オブジェクト順の修正は、パス形状の本当の穴や隙間も修復できません。書き出し後に文字や紋章の中央が埋まる場合は、形状と利用先のファイルを調べます。後の不透明なオブジェクトが開口部を覆っているだけかもしれません。SVGの穴ガイドは、塗り規則や輪郭の問題との区別に役立ちます。隣り合う形状の間に細い白線が出るなら、重なり順を変える前に隙間の診断を使います。
最後に、paint-orderは別の設定です。1つの要素の塗り、ストローク、マーカーを描くタイミングを変えますが、隣のパスの上に要素を置くものではありません。MDNのpaint-orderリファレンスは、その範囲を定義しています。色付きロゴの1部分が別の部分を隠す場合ではなく、太い輪郭が自身の塗りを隠す場合にpaint-orderガイドを使ってください。
| 後ろにあるもの | 最初の確認 | 想定される編集 |
|---|---|---|
| 別のパスの後ろにあるSVGパス | 同じ親の下での順序 | 前景のパスを後へ移す |
| 兄弟グループの後ろにある別グループの子 | 親グループ順と効果 | 適切なグループを移して再テストする |
| HTMLヘッダーの後ろにあるSVG全体 | ページの重ね合わせコンテキスト | 配置されたページのボックスを調整する |
| 自身の塗りを隠すストローク | 塗りとストロークの描画順 | paint-orderをテストする |
MDNの説明のとおり、CSSのz-indexは位置指定されたHTMLボックスやflex・grid項目では依然として重要です。このページレイアウトの問題を、SVG内に保存されたパス順と分けてください。
PerfectVectorを使う場合
既存のSVGマスターがあれば使ってください。再ベクター化は新しい形状群を作りますが、レイヤーの判断は解決しません。元データが統合されたPNGやJPGのロゴだけなら、PerfectVectorは前段で役立ちます。画像をSVG候補に変換し、編集ソフトで各部分と重なりを確認してください。納品前に復元したパスを意図した順序に移します。変換はデザインの前景オブジェクトを指定せず、小さな開口部がトレース後も残ることも保証しません。
元画像にぼかし、影、極小文字があるなら、その細部はトレースより手動の描き直しが確実な場合があります。より広いSVG編集ガイドでは、変換後のパス整理を扱っています。
納品するファイルを検証する
- 元のSVGのコピーを保存し、意図したオブジェクトまたはグループだけを並べ替えます。
- 重なりが重要になるサイズで、保存したファイルをブラウザーで開きます。元のデザインと比較してください。
- 受け取り側の編集ソフトやアプリで開き直します。同じ重なりと、マスク、クリップ領域、穴を確認します。
- 対話的なSVGなら、並べ替え後のポインターとホバー動作をテストします。新しく最前面になった形状が、以前は別の形状に届いていた操作を受ける場合があります。
- 特定の拡大率や書き出しサイズだけで結果がおかしいなら、さらにオブジェクトを移す前にサンプリングの継ぎ目と実際の隙間を調べてください。
ラスターしかない元データでは、PerfectVectorでSVG候補を作成し、予定サイズでパス順、開口部、保存した描画を確認します。すでに正しいベクター形状を含むファイルなら、並べ替えから始めてください。
よくある質問
CSSのz-indexで1つのSVGパスを最前面にできますか？ 1つのSVG内の通常の兄弟形状では、SVG文書の順でパスを後ろへ移します。周囲のページボックスに作用するCSSのz-indexは、これらの子形状を確実に並べ替えるものではありません。
paint-orderは最前面のSVGオブジェクトを変えますか？ いいえ。1つの形状や文字要素内の塗り、ストローク、マーカーの順を変えます。どのオブジェクトが別のものを覆うかを変えるには、別々のオブジェクトを並べ替えます。
グループ内の最後に移してもパスが隠れているのはなぜですか？ グループ全体が別のグループの後ろにあるかもしれません。子を外へ出す前に、親グループと変換、クリッピング、マスク、不透明度を確認してください。
参考資料
- W3C — SVG 1.1の描画モデル — SVG文書内の要素の描画順を定義しています。
- MDN — Node.appendChild() — 既存のDOM子要素を追加したときの移動を説明しています。
- MDN — SVGのpaint-order属性 — paint-orderの範囲を形状の塗り、ストローク、マーカーに限定しています。
- MDN — CSSのz-indexプロパティ — ページの重ね合わせでの位置指定項目とレイアウト項目のz-indexを説明しています。
- W3C — SVG 2の描画モデル — SVGの重ね合わせコンテキスト、グループ化、ポインターの対象を説明しています。
