Remplissez l'élément de chemin SVG avec une image d'arrière-plan

166

Est-il possible de définir un background-imagepour un <path>élément SVG ?

Par exemple, si je définis l'élément class="wall", le style CSS .wall {fill: red;}fonctionne, mais .wall{background-image: url(wall.jpg)}pas non plus .wall {background-color: red;}.

html css image svg background-image jbochi
la source
1
Montrant comment définir l'image d'arrière-plan pour le texte SVG, éventuellement par caractère: stackoverflow.com/a/10853878/405017
Phrogz
pour ceux qui recherchent plus d'informations détaillées, consultez ce lien d'
Paulo Bueno

Réponses:

261

Vous pouvez le faire en transformant l'arrière-plan en motif :

<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image xlink:href="wall.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
</defs>

Ajustez la largeur et la hauteur en fonction de votre image, puis référencez-la à partir du chemin comme ceci:

<path d="M5,50
         l0,100 l100,0 l0,-100 l-100,0
         M215,100
         a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
         M265,50
         l50,100 l-100,0 l50,-100
         z"
  fill="url(#img1)" />

Exemple de travail

robertc
la source
3
très bien, cela fonctionne-t-il aussi avec les images base64? au lieu de wall.jpg quelque chose comme data:image/png;base64,iVBORw0KGgoAAvous le feriez en CSS normal?
Christoph
12
@Christoph je ne sais pas, essayez-le et voyez.
robertc
2
@robertc J'ai essayé et cela n'a pas fonctionné, mais j'avais un élément de style en double. En l'éliminant, cela a très bien fonctionné;)
Christoph
4
@robertc: J'ai une question concernant votre réponse. Le motif commence aux coordonnées globales (0,0). Est-il possible de laisser le motif utiliser le système de coordonnées local de l'objet attaché? Je veux dessiner un rect à différents endroits dans mon svg et ce qui se passe, c'est que le motif est répété dans le fond du trou et que les objets sont utilisés comme masques.
Tobias Golbs
7
@robertc veuillez mettre à jour votre réponse pour mentionner qu'elle xlink:hrefest obsolète depuis SVG 2 et pour l'utiliser simplement hrefmaintenant. developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
Blake Regalia