Svg图像在反应中使用<img/>标签时不动画

Question

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

Answer 1

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

它可以动画的唯一方法是SVG本身定义它的动画（又名SMIL动画）。但是，对动画SVG的支持是不完整的（ IE，Edge ，Firefox，Chrome（考虑弃用）。

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

Answer 2

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

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

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

图标作为道具传递并像这样导入到父组件中：

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

我没有找到有关此主题的任何官方文档，并且在发布此答案时使用最新的React版本（16.12.0）对我有用。

欢呼

Answer 3

你的动画SVG是否自包含？我的意思是它使用内部SMIL或CSS动画吗？

如果是这样，那么使用<object>嵌入它应该有效。如果您使用<img>嵌入它，则无法制作动画。