你可以为 svg“背景图像”制作动画吗？
Posted
技术标签:
【中文标题】你可以为 svg“背景图像”制作动画吗？【英文标题】：Can you animate a svg "background-image"? 【发布时间】：2017-06-15 02:16:15 【问题描述】：我想将 svg 图像水平和垂直居中以响应我的窗口。所以我决定将图像整合到一个 div 背景中。现在，当我想将 stroke-dasharray 和带有 stroke-dashoffset 的动画添加到我的 svg 时，它不起作用。
这可以为 svg 背景图像设置动画吗？
svg-image 仅由多行组成。 这是我的 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- 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>【问题讨论】：
这个值得一看github.com/jrummyapps/AnimatedSvgView /search?q=svg+animate+transform 或 /search?p=svg+animate+transform 你搜索了吗？ :) 您必须将 CSS 放在 SVG 图像文件本身中，而不是放在容器 HTML 文件或单独的 CSS 文件中。 我没有看到任何尝试为问题中的任何内容设置动画，所以我无法真正创建一个答案来告诉你该怎么做，因为我真的不知道你想要做什么做。 它非常有可能为 SVG 背景设置动画。这个网站myapic.com 的动画做得很棒 【参考方案1】：您可以制作动画……但只能在支持它的浏览器中使用 - 您可以使用 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（我已在生产中用于内联 UX 改进，用于缓慢加载的 google recaptcha iframe）是：
<svg 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" fill="#000" />
<rect x="52" y="33" fill="#000" />
</svg>
【讨论】：
好酷。现在可以了，谢谢。所以我的错是我试图在css文件中对其进行动画处理，但是您将“样式”写入图像代码中。我其实不知道你能做到这一点。但是有没有办法从外部控制动画，例如当你点击一个按钮时，动画应该开始/停止？ 不带背景图像...另一种方法是将具有 bg 的类与图像的非动画版本交换... css 可以很好地压缩。 你可以试试 SVG-SMIL 动画……但这在 IE 或 Edge 中也不起作用。 任何有兴趣的人，我使用我在codepen.io/elliz/pen/ygvgay 的工具将 SVG 编码为 CSS。 效果很好，感谢您的回答和编码工具，非常专业的工具。以上是关于你可以为 svg“背景图像”制作动画吗？的主要内容，如果未能解决你的问题，请参考以下文章
是否可以使用 javascript 和/或 css 修改背景 svg 图像？