SVG изменения размера в IE11

Question

я исследовал странное поведение в IE11 и наткнулся на эту тему с конкретной проблемой, но для IE9:

SVG resizing in IE9

У меня есть элемент инлайн SVG Внутри div, который масштабируется в соответствии с окном браузера. Когда размер браузера изменяется, изображение SVG изменяется с ним, так что все изображение видно и оно сохраняет одинаковые пропорции. *

Однако в IE9 изображение намного меньше и не изменяет размер. Снятие viewBox масштабирует изображение до полного размера, который слишком велик, и он по-прежнему не изменяет размер.

Проблему можно увидеть в этом jsfiddle, где изменение размера не работает, как ожидалось в IE9 ни IE11.

<div id="outer"> 
<svg viewBox="0 0 700 1000" xmlns=http://www.w3.org/2000/svg> 
     <g transform="rotate(90, 350, 350)" id="pitch-rotated"> 
      <title>Pitch</title> 
      <path d="m0,0l1000,0l0,700l-1000,0l0,-700z" stroke-width="5" stroke="#fff" fill="#008800" id="perimiter"/> 
      <line id="centre-line" y2="700" x2="500" y1="0" x1="500" stroke-width="5" stroke="#ffffff" fill="none"/> 
      <path id="penalty-box-home" fill="none" stroke="#fff" stroke-width="5" d="m0,148.5l165,0l0,403l-165,0l0,-403z"/> 
      <path id="six-yard-box-home" fill="none" stroke="#fff" stroke-width="5" d="m0,258.5l55,0l0,183l-55,0l0,-183z"/> 
      <path d="m1000,148.5l-165,0l0,403l165,0l0,-403z" stroke-width="5" stroke="#fff" fill="none" id="penalty-box-away"/> 
      <path d="m1000,258.5l-55,0l0,183l55,0l0,-183z" stroke-width="5" stroke="#fff" fill="none" id="six-yard-box-away"/> 
      <circle fill="none" stroke="#ffffff" stroke-width="5" cx="500" cy="350" r="95" id="centre-circle"/> 
      <circle fill="none" stroke="#ffffff" stroke-width="10" cx="500" cy="350" r="1" id="centre-spot"/> 
      <circle fill="none" stroke="#ffffff" stroke-width="7" cx="110" cy="350" r="1" id="penalty-spot-home"/> 
      <circle fill="none" stroke="#ffffff" stroke-width="7" cx="890" cy="350" r="1" id="penalty-spot-away"/> 
      <path d="m165,277.5a91,91 1 0 10,145" stroke="#ffffff" stroke-width="5" fill="none" id="penalty-curve-home"/> 
      <path d="m835,277.5a91,91 0 0 00,145" stroke="#ffffff" stroke-width="5" fill="none" id="penalty-curve-away"/> 
      <path d="m0,10a7.5,7.5 0 0 010,-10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-home-left"/> 
      <path d="m0,690a7.5,7.5 0 0 110,10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-home-right"/> 
      <path d="m1000,10a7.5,7.5 0 0 1-10,-10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-away-left"/> 
      <path d="m1000,690a7.5,7.5 0 0 0-10,10" stroke="#ffffff" stroke-width="5" fill="none" id="corner-away-right"/> 
     </g> 
</svg>  

Так что мой вопрос не, там до сих пор нет, не JS способ решения этого, даже в IE11?

Answer 1

Схожие проблемы с одним из моих клиентов. Итак, контрольный список: -

1. Является ли window.onresize триггером?
2. Можете ли вы прочитать новые window.innerHeight и window.innerWidth?

То, что я сделал, это написать ползунок масштабирования для SVG. С кодом window.addEventListener("resize", .....) (спасибо вам), ознакомьтесь с новыми значениями height и width, вычислите правильный Zoom. Если .onresize не запускается (происходит случайно на каждые браузеров, из нашего контроля), они могут использовать ползунок, чтобы исправить его.

Sideline: Из любопытства это похоже на имитацию футбольного матча?