web-dev-qa-db-fra.com

Définition d’une image d’arrière-plan CSS sur un symbole SVG intégré?

Je sais que des fichiers svg externes peuvent être liés à des images d'arrière-plan:

background-image: url(Icon.svg);

et les identifiants de symboles peuvent être ciblés depuis un fichier svg externe:

background-image: url(Icons.svg#Icon-Menu);

mais comment puis-je définir une image de fond sur un symbole inline svg? (Comme ci-dessous) 

Mon svg est en haut du corps de ma page Web et non dans un fichier externe.

Je veux que l’image d’arrière-plan .test soit le symbole #Icon-Menu. 

.test{
  background:#ddd url('../#Icon-Menu');
  height:100px;
  width:100px;
  display:block;
}
<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="Icon-Menu" viewBox="0 0 512 512">
      <title>Menu</title>
      <path d="M93.417,5.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V8.333	C96.417,6.679,95.071,5.333,93.417,5.333z" />
      <path d="M93.417,40.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V43.333	C96.417,41.679,95.071,40.333,93.417,40.333z" />
      <path d="M93.417,75.333H6.583c-1.654,0-3,1.346-3,3v13.334c0,1.654,1.346,3,3,3h86.833c1.654,0,3-1.346,3-3V78.333	C96.417,76.679,95.071,75.333,93.417,75.333z" />
    </symbol>
  </svg>
</div>

<div class="test"></div>

htmlcsscss3svgicons
25
DreamTeK

Une image doit être un fichier complet.

De la spécification SVG ...

L'élément "image" indique que le contenu d'un fichier complet doit être rendu ...

La même chose est vraie pour l'image de fond, etc.

4
Robert Longson

@ Robert Longson

c'est vrai. Mais vous pouvez le faire de cette façon… .. Mais le symbole n’est pas la façon dont il fonctionnera. Malheureusement, vous devez utiliser "g" ou quelque chose comme ça pour faire référence.

body {
  background: url(http://www.broken-links.com/tests/images/faces.svg#devil-view);
}

http://codepen.io/Type-Style/pen/ByvKJq

Cela ne fonctionnera pas si le svg est dans le balisage.

4
Type-Style