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

Question

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

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

Answer 1

Vous pouvez le faire en transformant l’arrière-plan en un 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

Answer 2

La réponse par "robertc" est svg - et ceci est similaire à ce qui est utilisé par le code de chemin d'accès d3.js. J'ai réussi à créer des définitions dynamiques pour les chemins d3.js en appliquant ce qui suit.

J'ai réussi à le faire fonctionner en le définissant comme suit

chart.append("defs")
     .append('pattern')
     .attr('id', 'locked2')
     .attr('patternUnits', 'userSpaceOnUse')
     .attr('width', 4)
     .attr('height', 4)
     .append("image")
     .attr("xlink:href", "locked.png")
     .attr('width', 4)
     .attr('height', 4);