はじめに
これまで作成したSVGアイコンでは、要素を重ね合わせることがほとんどなく、色も１色しか使っていなかったため、要素を重ねたらどうなるのか？わかりませんでした。
div要素の重ね合わせではレイヤーが存在しましたが、SVGではレイヤーについては調べてみましたが見つけられず、どうやら記載順で重ね合わせが変わるようなので、それをまとめます。
今回実施する内容
赤色の正方形と青色の正方形を並べて重ね合わせがどうなるかを確認します。
ソースコード(Git Hub)
環境
OS: Windows 11 JP (64bit)
Edge: バージョン 140.0.3485.81 (公式ビルド) (64 ビット)
参考
用語
要素の重ね合わせ
隣り合わせ
symbol要素で、赤色と青色の正方形を隣り合わせに配置します。
<div id="nextto">
隣り合わせ赤と青<br>
<svg width="100px" height="50px" class="border">
<use xlink:href="overlap.svg#nextto"></use>
</svg>
</div>
隣り合わせの赤と青の正方形を構成するoverlap.svg内のid=nexttoを呼び出します。
<symbol id="rect" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" />
</symbol>
<symbol id="Red" xmlns="http://www.w3.org/2000/svg">
<use href="#rect" fill="red" />
</symbol>
<symbol id="Blue" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<use href="#rect" fill="blue" />
</symbol>
<symbol id="nextto" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<use href="#Red" />
<use href="#Blue" x="100" />
symbol要素で正方形を作成し、これをid="rect"とします。
この正方形をuse要素で呼び出し、赤色と青色に色を付けて、新たな正方形のsymbol要素を作成します。これらの要素をid="red"やid="blue"とします。
さらに、その赤色と青色の正方形をuse要素で呼び出し、赤色の正方形の右横にx="100"としてに青色の正方形を配置したSymbol要素を作成します。この要素をid="nextto"とします。
オーバーレイ赤の上に青
symbol要素で、赤色の正方形の上に半分だけ右にずらして青色の正方形を重ねます。図形を半分ずらることでオーバーレイの順番を確認できるようにします。
<div id="overlay">
オーバーレイ赤の上に青<br>
<svg width="100px" height="50px" class="border">
<use xlink:href="overlap.svg#overlay"></use>
</svg>
</div>
赤色の正方形の上に半分だけ右にずらして青色の正方形をオーバーラップしたoverlap.svg内のid=overlayを呼び出します。
<symbol id="overlay" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<use href="#Red" />
<use href="#Blue" x="50" />
</symbol>
赤色と青色の正方形のsymbolはid="red"やid="blue"で、先ほどの「隣り合わせ」と同じため、割愛します。
symbol要素id="overlay"では、use要素で赤色と青色の正方形を呼び出しますが、青色の要素は、赤色の要素に比べて右横x="50"とし、半分だけずらします。 use`要素の記載順が赤色、青色となっているため、赤色の上に青色の正方形が表示されます。
オーバーレイ青の上に赤
symbol要素で、赤色の正方形の上に半分だけ右にずらして青色の正方形を重ねます。図形を半分ずらることでオーバーレイの順番を確認できるようにします。
1つ前とは重ね順を逆にして、青色の上に赤色の正方形を重ねます。
<div id="overlay2">
オーバーレイ青の上に赤<br>
<svg width="100px" height="50px" class="border">
<use xlink:href="overlap.svg#overlay2"></use>
</svg>
</div>
赤色の正方形の上に半分だけ右にずらして青色の正方形をオーバーラップしたoverlap.svg内のid=overlay2を呼び出します。
<symbol id="overlay2" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<use href="#Blue" x="50" />
<use href="#Red" />
</symbol>
赤色と青色の正方形のsymbolはid="red"やid="blue"で、先ほどの「隣り合わせ」と同じため、割愛します。
symbol要素id="overlay2"では、use要素で先ほどとは順番を逆にして、青色、青色の正方形を呼び出しますが、青色の要素は、赤色の要素に比べて右横x="50"とし、半分だけずらします。 use`要素の記載順が青色、赤色となっているため、青色の上に赤色の正方形が表示されます。
おわりに
今回は、symbol要素を重ねたときの重なりがどうなるかを確認しました。
要素の記載した順にどんどん重ね書きしていくことがわかりました。
複雑なものになってくるとなかなか難しそうな気はしてきました。