Question

大家好

我在获取svg动画作为background / backgroundImage时遇到麻烦。我正在尝试实现以下目标：

background: `url(${animation})`

或

backgroundImage: `url(${animation})`

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

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

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

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

谢谢。

Answer 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>

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

1 个答案: