CSS 动画不适用于 <img> 中的 svg

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>

如何将图像标签内的 SVG 与 CSS 一起制作动画

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

Answer 1

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

如果您希望 img 标签起作用，请按照 Kaiido 的建议进行操作并嵌入它。

Answer 2

您无法从外部为<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 3

如果您正在使用纯 JavaScript 或其他不会在 HTML 输出中自动包含 SVG 内联的环境（例如 create-react-app 那样），这里有一个可能对您有用的解决方案：

<img id="logo" src="logo.svg" />
<script>
// load logo inline for animation on hover
const loadLogo = async () => {
  // get logo, parse source text, and insert text into doc
  document.write(await (await fetch("logo.svg")).text());
  // remove fallback img logo
  document.querySelector("img#logo").remove();
};
loadLogo();
</script>

所有这一切都是尝试在给定的 url/路径加载图像，然后将其文本内容直接插入到文档中。然后您可以从其他样式表中对其进行样式设置，使用 javascript 操作子元素，拥有用户交互动画等。如果由于任何原因无法加载，则有一个 <img> 作为备份。

这也可以写得更笼统，但这只是我曾经使用过的一个快速解决方案。

---

另一种解决方案是仅使用 <object> as explained here 嵌入 SVG，但根据您想要执行的操作可能会有一些限制。