您可以为svg“背景图像"制作动画吗? [英] Can you animate a svg "background-image"?
问题描述
我想将svg图像水平和垂直于窗口中心.因此，我决定将图像集成到div背景中.现在，当我想向我的svg中添加带有stroke-dashoffset的stroke-dasharray和动画时，这是行不通的.
I want to center a svg-image horzontal and vertical responsive to my window. So I decided to integrate the image in a div background. Now when i want to add stroke-dasharray's and animations with stroke-dashoffset to my svg it doesn't work.
该位置是要为svg背景图像制作动画吗?
Is this posibble to animate a svg background image?
svg图像仅由多行组成.这是我的svg文件(有更多行，但x和y值不同)
The svg-image consists only out of many lines. Here my svg file (there are much more lines with only different x and y values):
<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>推荐答案
您可以设置动画...但是只能在支持它的浏览器中使用-可以使用IE和其他一些浏览器(编辑，截至2018年，Edge现在支持此功能)
You can animate ... but only in browsers that support it - out you go IE and some other browsers (Edit, as of 2018 Edge now supports this).
此示例将CSS用于动画...我已成功使用< animate> 标签，但尚未进行广泛的测试.
This example uses CSS for the animation ... I have successfully used <animate> tags but have not tested extensively.
.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(我已在生产中使用它来为缓慢加载的Google Recaptcha iframe进行内联UX改进)
Note the actual encoded SVG used above (that I have used in production for an inline UX improvement for a slow-loading google recaptcha iframe) is:
<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>
这篇关于您可以为svg“背景图像"制作动画吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
