将 SVG 动画设置为背景图像 - ReactJS答案

【问题标题】：Set SVG Animation as background image - ReactJS将 SVG 动画设置为背景图像 - ReactJS
【发布时间】：2020-09-06 01:19:02
【问题描述】：

大家好

我无法将我的 svg 动画作为背景/背景图像。我正在尝试实现这样的目标：

background: `url(${animation})`

或

backgroundImage: `url(${animation})`

当我像这样加载我的 svg 动画时。 SVG 将显示，但没有任何动画。

当我使用一个对象时，它确实有效。看起来像这样：

<object  type="image/svg+xml" data={animation} />

如何将 SVG 动画设置为背景。欢迎任何提示，请记住我仍然是初学者。

提前致谢。

【问题讨论】：

它有什么样的动画？ SVG 作为图像不支持脚本或交互。
听起来你可能想将它包装在一个 div 中并使用 z-index 将它放在你的容器后面。

标签： javascript reactjs animation svg

【解决方案1】：

不确定背景是否可以在这里工作。您可能更喜欢将其包装在一个 div 中并将其放置在您的容器后面。

body, html {
 padding: 0;
 margin: 0;
 overflow: hidden;
 box-sizing: border-box;
}

.container {
  display:flex;
  position: relative;
  height: 50vh;
  width: 50vw;
  background: yellow;
  padding: 50px;
  
}

.background {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: magenta;
  opacity: 1;
  border: 10px dotted white;
  z-index: 0;
}

.content {
  padding: 0px 10px;
  background: cyan;
  width: 100%;
  height: 100%;
  z-index: 1;
}

<div class="container">
 <div class="background"></div>
 <div class="content">
  <p>Ipsum lorem this is fake content galorum.</p>
 </div>
</div>

【讨论】：