第10回 SVG 要素を重ねてみる - Qiita

第10回 SVG 要素を重ねてみる #SVG - Qiita 0 いいねしたユーザー一覧へ移動 0 X（Twitter）でシェアする Facebookでシェアする はてなブックマークに追加する more_horiz 記事を削除する close 一度削除した記事は復旧できません。 この記事の編集中の下書きも削除されます。 削除してよろしいですか？ キャンセル 削除する delete @ Mount ( Build Mount ) 第10回 SVG 要素を重ねてみる SVG 0 投稿日 2025年11月09日 はじめに これまで作成したSVGアイコンでは、要素を重ね合わせることがほとんどなく、色も１色しか使っていなかったため、要素を重ねたらどうなるのか？わかりませんでした。 div 要素の重ね合わせではレイヤーが存在しましたが、SVGではレイヤーについては調べてみましたが見つけられず、どうやら記載順で重ね合わせが変わるようなので、それをまとめます。 今回実施する内容 赤色の正方形と青色の正方形を並べて重ね合わせがどうなるかを確認します。 ソースコード(Git Hub) 環境 OS: Windows 11 JP (64bit) Edge: バージョン 140.0.3485.81 (公式ビルド) (64 ビット) 参考 用語 要素の重ね合わせ 隣り合わせ symbol 要素で、赤色と青色の正方形を隣り合わせに配置します。 menu.htmlの抜粋 <div id= "nextto" > 隣り合わせ赤と青 <br> <svg width= "100px" height= "50px" class= "border" > <use xlink:href= "overlap.svg#nextto" ></use> </svg> </div> 隣り合わせの赤と青の正方形を構成する overlap.svg 内の id=nextto を呼び出します。 overlap.svgの抜粋 <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 要素で、赤色の正方形の上に半分だけ右にずらして青色の正方形を重ねます。図形を半分ずらることでオーバーレイの順番を確認できるようにします。 menu.htmlの抜粋 <div id= "overlay" > オーバーレイ赤の上に青 <br> <svg width= "100px" height= "50px" class= "border" > <use xlink:href= "overlap.svg#overlay" ></use> </svg> </div> 赤色の正方形の上に半分だけ右にずらして青色の正方形をオーバーラップした overlap.svg 内の id=overlay を呼び出します。 overlap.svgの抜粋 <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つ前とは重ね順を逆にして、青色の上に赤色の正方形を重ねます。 menu.htmlの抜粋 <div id= "overlay2" > オーバーレイ青の上に赤 <br> <svg width= "100px" height= "50px" class= "border" > <use xlink:href= "overlap.svg#overlay2" ></use> </svg> </div> 赤色の正方形の上に半分だけ右にずらして青色の正方形をオーバーラップした overlap.svg 内の id=overlay2 を呼び出します。 overlap.svgの抜粋 <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 要素を重ねたときの重なりがどうなるかを確認しました。 要素の記載した順にどんどん重ね書きしていくことがわかりました。 複雑なものになってくるとなかなか難しそうな気はしてきました。 0 いいねしたユーザー一覧へ移動 0 comment 0 コメント一覧へ移動 新規登録して、もっと便利にQiitaを使ってみよう あなたにマッチした記事をお届けします 便利な情報をあとで効率的に読み返せます ダークテーマを利用できます ログインすると使える機能について 新規登録 ログイン 0 いいねしたユーザー一覧へ移動 0 more_horiz 記事を削除する close 一度削除した記事は復旧できません。 この記事の編集中の下書きも削除されます。 削除してよろしいですか？ キャンセル 削除する delete