駒場祭のマップページでは、SVGをJavascriptで操作することにより地図機能を実装しています。
しかし、この分野あまり流行ってないからなのか、結構ブラウザによって差異があったりします。ここではその一部を紹介します。
CSS
(Firefox)<defs>にstyleを書かないと<use>にスタイルが適用されない。
SVGには<defs>というHTMLでいう<head>に当たるタグがありそこには、<symbol>や<style>を置くことが出来ます。<symbol>は、使い回すパーツを定義することができ、<use>を使って呼び出すことが出来ます。駒場祭のマップでは案内所の記号などに用いています。
さて、このとき、Firefoxだと、<defs>以外にstyleを配置すると<use>にそのスタイルが適用されず、それを用いて色などを設定している場合真っ黒なアイコンになります。
getBBox
これ何
getBBox - Web APIs | MDN
要素のx、y、width、heightを取得できるSVGGraphicsElementの関数です。querySelectorなどで拾ったSVG要素についている関数です。属性から取ればいいじゃんと思うかもしれませんが、<circle>などx、y属性を使わないものでも統一的に取れるので便利です。
(Safari) <use>だとうまく取れない。
<use>要素相手だとgetBBoxは正しい値を返しません。要素名で分岐して素直にx属性などから取りましょう。
(Firefox) display: noneな要素に対し使うとNS_ERROR_FAILUREが発生する
要はdisplay: noneな要素に対しては使えないということです。他のブラウザだと大丈夫なんですけどね。
解決策としてはvisibility: hidden;pointer-event: none;に置き換えるという方法があります。
まとめ
普段からそうですが特にSVGは多くのブラウザで動作確認しましょう。
また何かあったら追記するかもしれません。