

IE11において、以下のようにHTML内に直接記述したSVGのスケーリングが、他のブラウザと異なります。

[code]

    #svg {
      width: 80%;
      
      background-color: #DDD;
    }
[/code]

[code]

    <svg viewBox="0 0 430 330" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <circle cx="100" cy="100" r="100" fill="red" />
      <rect x="130" y="130" width="300" height="200" fill="blue" />
    </svg>
[/code]

Firefox, Chrome, Edgeなどでは横幅に合わせてアスペクト比を保持したままスケーリング(縦幅を自動で調節)しますが、  
IEにおいては縦幅が固定になってしまいます。

IEにて、横幅に合わせてアスペクト比を保持したまま、縦幅を自動で調節させたいのですが、良い方法はないでしょうか？


CC BY-SA 3.0
2016-01-12T07:41:31.757
20853
2016-03-13T05:08:43.773
7227
question
html css svg
IEにおいて、SVGをHTML内に直接記述した場合、他のブラウザと大きさが異なる


[asamuzaK.jp : ♪Vector Vector, please. Oh, the mess I'm in (c)
UFO](http://asamuzak.jp/html/483)を参照し、以下のようにwidthに応じてheightを計算し設定するjavascriptを書くことで解決しました。

_(実際に使用する場合は、IEのみに適用されるよう、if (document.documentMode)などで条件をつける必要があります。)_

[code]

    function resize_svg_width(elem) {
      function getAspect(o) {
        var y = o.split(' ');
        return y[3] / y[2];
      }
    
      z = document.defaultView.getComputedStyle(elem, '').width;
      a = z.match(/([0-9\.]+)px/)[1] * 1;
      b = getAspect(elem.getAttribute('viewBox'));
      elem.style.height = (a * b) + 'px';
    }
    
    var resize_event = function() {
      var target = document.getElementById("svg");
    
      resize_svg_width(target);
    }
    
    window.addEventListener('resize', resize_event, false);
    resize_event();
[/code]

[code]

    svg {
      width: 80%;
      
      background-color: #DDD;
    }
[/code]

[code]

    <svg viewBox="0 0 430 330" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg">
      <circle cx="100" cy="100" r="100" fill="red" />
      <rect x="130" y="130" width="300" height="200" fill="blue" />
    </svg>
[/code]


CC BY-SA 3.0
2016-01-12T12:43:53.480
20863
2016-01-13T03:34:15.513
2016-01-13T03:34:15.513
7227
7227
20853
answer