你能为SVG“background-image”添加动画效果吗？

Question

你能为SVG“background-image”添加动画效果吗？

26

我想将一个svg图像水平和垂直地居中，以响应我的窗口大小。因此，我决定将图像集成到一个div背景中。现在当我想要为我的svg添加stroke-dasharray和带有stroke-dashoffset的动画时，它不起作用。

是否可以动画化svg背景图像？

svg图像仅由许多线条组成。 这是我的svg文件(只有不同x和y值的更多线条)：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1200"  xml:space="preserve">
<g id="Layer_1">

<line class="path" stroke-linecap="round" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="960" y1="600" x2="2346.139" y2="-42.064"/>

</g>
</svg>

以下是我的 HTML 和 CSS 文件：

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: red;
}

.Container {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-image: url(Space.svg);
  background-size: cover;
  background-position: center;
}


.path {
  stroke-dasharray: 20;
}

  <body>
    <div class="Container">
    </div>
  </body>

- 5rsly

这值得一看 https://github.com/jrummyapps/AnimatedSvgView - Jon Goodwin

/search?q=svg+animate+transform 或者 /search?p=svg+animate+transform 你搜索了吗？ :) - G-Cyrillus

你必须将CSS放在SVG图像文件本身中，而不是容器HTML文件或单独的CSS文件中。 - Robert Longson

我没有看到问题中有任何尝试去动画化任何东西，所以我无法真正为您创建一个答案来展示您该做什么，因为我不知道您想要做什么。 - Robert Longson

非常有可能对SVG背景进行动画处理。这个网站http://myapic.com在动画方面做得非常棒。 - BiJ

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ruskin · Accepted Answer

您可以在支持它的浏览器中实现动画效果，但是不支持此功能的浏览器（如IE和其他一些浏览器）将无法使用（编辑，截至2018年Edge已支持此项功能）。

此示例使用CSS进行动画...我已成功使用<animate>标签，但尚未进行过广泛测试。

.svg {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='300' height='70' viewBox='0 0 300 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E %23a%7Banimation:x .5s ease alternate 14%7D%40keyframes x%7Bfrom%7Bfill:%23c2c2c2%7Dto%7Bfill:%23fff%7D%7D%3C/style%3E%3Crect id='a' x='14' y='23' width='28' height='28' fill='%23c2c2c2' /%3E%3Crect x='52' y='33' width='100' height='11' fill='%23c2c2c2' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  min-height: 200px;
}

<div class="svg">Look at my background</div>

请注意，上面使用的实际编码的SVG（我已经在生产中用于慢加载谷歌验证码iframe的内联UX改进）是：

<svg width="300" height="70" viewBox="0 0 300 70" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
        #a { animation: x .5s ease alternate 14; }

        @keyframes x {
           from { fill: #000; }
             to { fill: #fff; }
        }
    </style>
    <rect id="a" x="14" y="23" width="28" height="28" fill="#000" />
    <rect x="52" y="33" width="100" height="11" fill="#000" />
</svg>