IE is different in size from other browsers when SVG is written directly in HTML

IE11 scales SVGs written directly in HTML as follows:

#svg{
  width —80%;
  
  background-color:#DDD;
}

<svg viewBox="00 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"/>
  <rectx="130"y="130" width="300" height="200" fill="blue"/>
</svg>

Firefox, Chrome, Edge, etc. scale (automatically adjust the vertical width) while maintaining the aspect ratio to match the width. IE has a fixed vertical width.

I would like IE to automatically adjust the vertical width while maintaining the aspect ratio to match the width, but is there a good way?

html css svg

2022-09-30 21:12

1 Answers

asamuzaK.jp:♪Vector Vector, please.Oh, the message I'm in(c)UFO and write a javascript that calculates and sets the height according to the width as follows:

(For actual use, conditions such as if(document.documentMode) must be applied only to IE.)

function resize_svg_width(em){
  function getAspect(o){
    variable = o.split(');
    return[3]/y[2];
  }

  z= document.defaultView.getComputedStyle(elem, ').width;
  a=z.match(/([0-9\.]+)px/)[1]*1;
  b=getAspect(em.getAttribute('viewBox'));
  elem.style.height=(a*b)+'px';
}

var resize_event=function(){
  target= document.getElementById("svg");

  resize_svg_width(target);
}

window.addEventListener('resize',resize_event,false);
resize_event();

svg{
  width —80%;
  
  background-color:#DDD;
}

<svg viewBox="00 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"/>
  <rectx="130"y="130" width="300" height="200" fill="blue"/>
</svg>

2022-09-30 21:12

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656