blogブログ
svgの弱点
●android苦手
対応していても挙動の怪しいブラウザが多い。
jsでclass付与しても色変わらない、など。
動的な処理に弱いブラウザがandroidに多い
●display:noneに弱い
①
svgスプライトでグラデーションの設定するが
設定したアイコンが
display:noneであったり、display:noneになったりすると
グラデーションの反映はされない
②
jsでclass付与などしてdisplay:noneすると
その後display:block指定しても表示されないブラウザがある
android4系一部端末で確認できた。
●android3以下やIE9などは未対応
●svgスプライト
svgスプライトは、<body>タグの直下に書かないと
chromeで表示されない場合があるので
●SVG非対応ブラウザ対応
<foreignObject display=”none”></foreignObject>内にタグを書く。
非対応ブラウザは、SVGまわりのタグをスルーするので
でも結局この対応のために使用する画像へのリクエストが発生するので
どうしてもSVGでないといけない理由がない限り
ユーザーにSVG非対応ブラウザを含むなら、svg使うメリットが半減する。
この部分、プログレッシブ・エンハンスメントを考える。
●トランスフォーム
AとBのパスのアンカーポイントの数が同じなら、A⇒Bへトランスフォームできる。
今回は試す部分なかったが、きっと動かないブラウザがいっぱいありそう。
svgのいいところ