コーディング

IEにSVGが負けない呪文

  • このエントリーをはてなブックマークに追加
IEにSVGが負けない呪文

こんにちはコバヤシです。

 

WEB業界に入るとみんなが嫌いになるという定評があるIEですが、とある案件のコーディング中にまたもやIEに(しかも同じ案件で二連続で!)やられてしまったので、自分メモのために残しておきます。

 

事件①い、な、い

SVGで背景画像を貼ったときのこと。

なんと、IEでは表示がされない・・・・・!!!!

何が起きたの??!!!chromeもFirefoxもダイジョブだよ(;´・ω・)?!!!

となり、、、

SVGをPhotoshopで書き出しなおすも、効果なし(´;ω;`)

こうなったら!!!!

フォトショをイラレに変換しなんやかんや頑張り、SVGをIllustratorで書き出しなおすも、効果なし(´;ω;`)

泣く泣くグーグル先生で検索すると・・・・・

 

SVGファイルをテキストエディタで開いて「width」「height」を追記する。

<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 100 100″>

<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 100 100″ width=”100″ height=”100″>

 

という神のお告げを発見。

イラレやフォトショで書き出すCSSコードは完璧じゃないのはよくわかりますが、SVGでも同様なようで、ちょいちょい手を加えてあげなくてはならんのですね。

(普段はハイスぺなのに、たまに手がかかるなんてadobe様のギャップ萌えというやつですね(/o\))

これははまります。

 

事件②サイズちいちょい。

書き出したところ、、、サイズがちいちゃい問題。

なんでIEだけちいちゃいんだい??やる気ないのかな(´・ω・`)???

そんな問題はこちらで解決。

<HTML>

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480" viewBox="0 0 640 480">

<CSS>
    .img {
        width:30%;
    }
    .img img[src$=".svg"] {
        width: 100%;
        height: auto;
    }

親要素の幅をきっちり指定してあげること、svgにwidth100%を指定、HTML側ではSVGにはViewboxを指定することで解決しました。

 

一度ハマると原因がいろいろ考えられすぎて困るSVGに、天敵IEが遭遇するともう大変・・・・!!(これだからIEは嫌いなんだ・・・

 

参考は以下です。先人たちの知恵にはいつも助けていただいております。。。

http://motif-xxx.com/ie-svg/

https://qiita.com/both3lectrodes/items/71e24e25ca64b14696d1

 

 

余談ですが、最近モニターを買いました。

作業環境が整って満足です(=゚ω゚)ノ

あとは、デスクトップとテーブルとイスと、作業が静かにできる居住地がほしいな、なんて思ってしまいました。

 

 

  • このエントリーをはてなブックマークに追加

建築に特化したホームページで集客&受注へ

実績の99%が建築業界だからわかる、"受注の取れるWebサイト"づくりを行います。
1000サイト以上の制作実績と、豊富なサービス・運営サポートが御社をバックアップ。お気軽にお問い合わせください!

D-Gripシステム Webサイトへ