SVG图像在<img>标签中使用时没有动画答案

【问题标题】：Svg images not animating when using it in <img> tag in reactSVG图像在<img>标签中使用时没有动画
【发布时间】：2017-02-01 18:08:59
【问题描述】：

所以基本上我是在 img 标签中加载一个 svg 作为加载器。图像出现并显示，但没有动画。如果我把它放在 index.html 中，它会按预期工作。我希望它是 JSX，我想念的东西不知道是什么。任何线索表示赞赏。

【问题讨论】：

【解决方案1】：

如果将 SVG 图像加载到 <img> 标记中，它将呈现为静态图像，并且页面的 javascript 无法访问其内部结构，并且页面的样式定义不会影响它。

动画的唯一方法是 SVG 本身定义其动画（也称为 SMIL 动画）。但是，对动画 SVG 的支持不完整（~~IE、Edge~~、Firefox、Chrome（考虑弃用）。

如果您想动态影响您的 SVG，请将它们直接嵌入到页面中，作为 <SVG> 标签。

【讨论】：

所以我尝试了但没有任何结果。 :(
您的 xlink 语法不正确。然而，链接的 SVG 几乎和 <img> 一样没用 - 嵌入的。您需要将它们嵌入到页面代码本身中（通过服务器端嵌入或显式加载并嵌入到 DOM 中）。
xlinkHref 特定于 JSX 反应。我会试试的，谢谢。
如果您坚持使用 xlinking，请使用以下语法：<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">，然后是 <use xlink:href=
Chrome 已取消其 SMIL 弃用计划。

【解决方案2】：

您的动画 SVG 是独立的吗？我的意思是它是使用内部 SMIL 还是 CSS 动画？

如果是这样，那么使用 <object> 嵌入它应该可以工作。如果您使用 <img> 嵌入它，它不会动画。

【讨论】：

【解决方案3】：

正如 e-neko 在当前问题的答案之一中正确呈现的那样，img 标签呈现为静态元素。因此，这就是我设法正确渲染动画 SVG 的方法：

public render(): ReactElement {
  const { icon } = this.props;

  return (
    <svg>
      <image xlinkHref={icon}></image>
    </svg>
  );
}

图标作为 props 传递并导入到父组件中，如下所示：

import LoadingLogo from './assets/images/loading.svg';

我没有找到任何关于这个主题的官方文档，这对我使用发布此答案时可用的最新 React 版本 (16.12.0) 有效。

干杯

【讨论】：