All geek questions in one place

Can you animate svg "background-image"?

I want to center the horzontal SVG image and react vertically to my window. So I decided to integrate the image in the background. Now when I want to add stroke-dasharray and barcode animation for my svg, it does not work.

Is this an example for svg background image animation?

An svg image consists of only many lines. Here is my svg file (there are much more lines with 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>
Run codeHide result

And here are 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>
Run codeHide result
+11
source share
2 answers

... , - IE (Edit, 2018 Edge ).

CSS ... <animate> .

.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>
Hide result

SVG, ( UX iframe Google recaptcha):

<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>
+17

A background-image - , CSS. , HEX .

, , , :

1) background-position background-size , , .

2) , . / ( top, bottom, left, right, width height.)

0

Source: https://habr.com/ru/post/1668209/

More articles:


All Articles