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

— jbochi
source

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

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
source

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

@Christoph je ne sais pas, essayez-le et voyez.

— robertc

@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

@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

@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