Как заставить svg анимацию заработать в ie11

Question

const Bar = ({ x, h }) => (
  <rect className="bar" width="3" strokeWidth="1" height={h} x={x} y="0" />
);

 <svg className={className} xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="43" height="43" viewBox="0 0 43 43">
      <defs>
        <circle id={circle} cx="139.5" cy="2369.5" r="21.5" />
        <mask id={mask} width="43" height="43" x="0" y="0" fill="#fff" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox">
          <use xlinkHref={`#${circle}`} />
        </mask>
      </defs>
      <use fill="none" fillRule="evenodd" stroke="#FFF" strokeDasharray="1 4" strokeWidth="8.4" mask={`url(#${mask})`} transform="translate(-118 -2348)" xlinkHref={`#${circle}`} />
      <g transform="translate(28 30) rotate(180)" className="bars">
        <Bar x={0} h={6} />
        <Bar x={5} h={12} />
        <Bar x={10} h={16} />
      </g>
    </svg>

Answer 1

В SVG 1.1 элементы <svg> не поддерживали атрибуты трансформации. transform: rotate() scale() translate()

В SVG 2 предлагается, что они должны поддерживать. Но пока, этот стандарт не внедрён.

Поддержка браузерами

SVG transform из таблицы видно, что IE11 не поддерживает транcформацию
и не будет никогда поддерживать, так как Microsoft закончила поддержку IE11

CSS transform Таблица говорит, что IE11 Edge поддерживают трансформации

Поэтому, если необходимо создать приложение, которое будет поддерживаться IE11, Edge в плане анимации трансформации, то необходимо это делать в CSS.

Ниже пример простейшей анимации трансформации вращения

#rect {
transform-origin:center center;
transform-box:fill-box;
transition: transform 1s linear; 
}
#rect:hover  {
 transform:rotate(360deg);
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	  width="300" height="300" viewBox="0 0 300 300" >  

<rect id="rect" x="50" y="50" width="150" height="150" rx="15" fill="purple" />
</svg>

Несмотря на данные Caniuse в IE11 так и не заработала анимация вращения.

В Edge работает, но как-то очень своеобразно.

БЛОГ НА HUSL

Как заставить svg анимацию заработать в ie11

Ответы (1 шт):

Поддержка браузерами