CSS-анимация не работает для svg в <img>

213

18 августа 2018, 04:40

Я пытаюсь анимировать SVG в теге image / object, но анимация не работает.

svg { 
  width: 100%; 
  height: 200px; 
} 
 
.rotate-45 { 
  transform-origin: center; 
  transform: rotate(45deg); 
} 
 
.rotate { 
  transform-origin: center; 
  animation: rotate 1s ease-in-out infinite; 
} 
 
.rotate-back { 
  transform-origin: center; 
  animation: rotate 1s ease-in-out infinite; 
  animation-direction: alternate; 
} 
 
.left { 
  animation: move 1s ease-in-out infinite; 
} 
 
.right { 
  animation: move 1s ease-in-out infinite; 
} 
 
@keyframes rotate { 
  100% { 
    transform: rotate(calc(90deg + 45deg)); 
  } 
} 
 
@keyframes move { 
  50% { 
    transform: translate(-30px, -30px); 
  } 
}

<svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g transform="translate(500,500)"> 
      <rect class="rotate-45 rotate-back" x="-5" y="-5" width="10" height="10" stroke="#00a99d" stroke-width="20" fill="none" /> 
      <rect class="rotate-45 rotate" x="-50" y="-50" width="100" height="100" stroke="#00a99d" stroke-width="20" stroke-linejoin="bevel" fill="none" /> 
      <g transform="translate(-50,0) rotate(-45)"> 
        <polyline class="left" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none" /> 
      </g> 
      <g transform="translate(50,0) rotate(135)"> 
        <polyline class="right" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none" /> 
      </g> 
      <text y="-140" text-anchor="middle" font-weight="bold" font-size="3em" font-family="sans-serif">loading data...</text> 
    </g> 
  </svg>

Как анимировать SVG внутри тега изображения вместе с CSS.

Вот plunker для этого кода - https://plnkr.co/edit/TdfR7cpVaQArtcUs0Hro?p=preview

Answer 1

Вы не можете анимировать внутренние элементы <img> снаружи. Даже если это SVG. Для этого есть две причины:

CSS не применяется к границам документа и
Изображения, на которые ссылается через <img>, должны быть автономными.

Анимация должна работать, если вы поместите CSS внутри внешнего SVG (как обычно, в элемент <style>).

Также обратите внимание, что вам нужно будет изменить способ преобразования - transform-origin. Этот способ, которым он работает в Chrome, удобен, но он неверен в соответствии с текущей спецификацией. Он не будет работать в других браузерах, таких как Firefox.

<svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <style> 
.rotate-45 { 
  transform-origin: 0px 0px; 
  transform: rotate(45deg); 
} 
 
.rotate { 
  transform-origin: 0px 0px; 
  animation: rotate 1s ease-in-out infinite; 
} 
 
.rotate-back { 
  transform-origin: 0px 0px; 
  animation: rotate 1s ease-in-out infinite; 
  animation-direction: alternate; 
} 
 
.left { 
  animation: move 1s ease-in-out infinite; 
} 
 
.right { 
  animation: move 1s ease-in-out infinite; 
} 
 
@keyframes rotate { 
  100% { 
    transform: rotate(135deg); 
  } 
} 
 
@keyframes move { 
  50% { 
    transform: translate(-30px, -30px); 
  } 
} 
  </style> 
  <g transform="translate(500,500)"> 
    <rect class="rotate-45 rotate-back" x="-5" y="-5" width="10" height="10" stroke="#00a99d" stroke-width="20" fill="none"/> 
    <rect class="rotate-45 rotate" x="-50" y="-50" width="100" height="100" stroke="#00a99d" stroke-width="20" stroke-linejoin="bevel" fill="none"/> 
    <g transform="translate(-50,0) rotate(-45)"><polyline class="left" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none"/></g> 
    <g transform="translate(50,0) rotate(135)"><polyline class="right" points="40,-40 50,-50 -40,-50 -50,-40 -50,50 -40,40" stroke="#00a99d" stroke-width="20" fill="none"/></g> 
    <text y="-140" text-anchor="middle" font-weight="bold" font-size="3em" font-family="sans-serif">loading data...</text> 
  </g> 
</svg>