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...
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):
<svg version="1.1" xmlns="" xmlns: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>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>1 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=' 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="">
<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>
Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.
