Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@both3lectrodes

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

概要

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

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What is going on with this article?