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>
<line 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> </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>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 x="14" y="23" width="28" height="28" fill="#000" /> <rect x="52" y="33" width="100" height="11" fill="#000" />
</svg>
