SVG スプライトの手法を取り入れ,SVG アイコンの定義は icn.svg
に集約することにした。
SVG 出与えも Aejs に組み込んで直接挿入してしまうことを考えていたが,舞覧隠しの適切な分離が出来なくなる,要素の再利用に必要な id
属性が使いにくい,といった問題があった。外部 SVG を <use>
で利用すれば Shadow DOM になるので,id 属性の衝突などを気にせず要素を整理しやすくなる。
スプライト画像として background-image
で利用しやすいというのも大きい。:target
とフラグメント識別子を利用して表示要素を変化させる技術があることを知ったが,舞覧によっては効率的に隠し出来ないことがあるらしく,今回は見送った。<view>
が使えればいいが,Safari の対応に難がある。当面は古典的な座標指定で行くことにした。
アイコン制作では,アイコンを並べて全体のばら成しを見ながら調整することが多いため,見本を兼ねられるのも便利だ。
SVG スプライトだけで十分かもしれないと思いかけたが,<use>
1つでも若干冗長な上に,1つのアイコンの要素を細かく制御したい場合に <use>
が複数必要になるため,やはりスクリプトでの補完は欲しい。