LoginSignup
0

More than 3 years have passed since last update.

IE11でsvgをimageタグで読み込んだ場合にサイズが適用されない

Last updated at Posted at 2019-03-21

概要

IE11でsvgをimageタグで読み込んだ場合に、下記のような記述で、CSSのサイズが画像に適用されなかった。

index.html
<div class="img"><img src="dummy.svg" alt=""></div>
style.css
    .img img {
        width: 300px;
        height: auto;
    }

解決策

    .img {
        width: 300px;
    }
    .img img[src$=".svg"] {
        width: 100%;
        height: auto;
    }

属性セレクタで横幅の指定する。親要素にサイズを指定するとimg要素が親要素にフィットして表示される。

svg自体にviewBoxの指定がされていないと、上記のみの記述では効かない。
その為、viewBoxの記述を追加すると動作するようになる。

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

参考

https://stackoverflow.com/questions/27970520/svg-with-width-height-doesnt-scale-on-ie9-10-11
https://qiita.com/Shitsu/items/4edf6fae3329c4904f29

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0