CSS动画不适用于svg in

Question

我试图在图像/对象标签中设置SVG动画，但它无法正常工作

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>

如何使用CSS将图像标签内的SVG设置为动画

这是代码https://plnkr.co/edit/TdfR7cpVaQArtcUs0Hro?p=preview的一个plunker

Answer 1

你不能从外面动画<img>的内部。即使它是SVG。有两个原因：

1. CSS不适用于文档边界，并且
2. 通过<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>

Answer 2

你可以使用<?xml-stylesheet href="style.css" type="text/css"?>，如果你不想将它嵌入img标签工作。上面的代码将在object标记中使用

如果你想要img标签工作做Kaiido建议和嵌入它。