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

Question

Est-il possible de définir une image d'arrière-plan pour un élément de chemin svg?

Par exemple, si je règle la classe de l'élément sur 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);