Can you animate a svg "background-image"? : <p>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.</p>

<p>Is this posibble to animate a svg background image?</p>

<p>The svg-image consists only out of many lines.
<strong>Here my svg file (there are much more lines with only different x and y values):</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;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"&gt;
&lt;g id="Layer_1"&gt;

&lt;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"/&gt;

&lt;/g&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p><strong>And here my Html and Css files:</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;body&gt;
    &lt;div class="Container"&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
</div>
</div>
</p>
