web-dev-qa-db-fra.com

Pouvez-vous animer une image d'arrière-plan svg?

Je veux centrer une image svg horizontale et verticale en fonction de ma fenêtre. J'ai donc décidé d'intégrer l'image dans un fond div. Maintenant, quand je veux ajouter des traits de traits et des animations avec des traits de traits de bord à mon svg, cela ne fonctionne pas.

Est-ce possible d'animer une image d'arrière-plan svg?

L'image svg se compose uniquement de plusieurs lignes. Voici mon fichier svg (il y a beaucoup plus de lignes avec seulement des valeurs x et y différentes):

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

Et voici mes fichiers Html et Css:

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>
htmlcsssvgbackground-imagesvg-animate
11
5rsly

Vous pouvez animer ... mais uniquement dans les navigateurs qui le prennent en charge - c'est parti IE et certains autres navigateurs (Edit, à partir de 2018 Edge le prend désormais en charge)).

Cet exemple utilise CSS pour l'animation ... J'ai utilisé avec succès <animate> tags mais n'ont pas été testés de manière approfondie.

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

Notez que le SVG encodé réel utilisé ci-dessus (que j'ai utilisé en production pour une amélioration UX en ligne pour un iframe google recaptcha à chargement lent) est:

<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
Ruskin