Can you animate a svg "background-image"?
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.
Is this posibble to animate a svg background image?
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):
And here my Html and Css files:
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>Answer
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).
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>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>