Comment définir l’image d’arrière-plan d’un élément rect SVG?

J’ai créé un rectangle SVG en utilisant le plugin jQuery SVG de keith-wood. Voici le code:

svg.graph._wrapper.rect(group, 0, 100, 40, 20, {fill: 'ivory', stroke: 'black', strokeWidth : 2}); 

Alors j’ai pensé que je pouvais facilement changer le remplissage au lieu d’utiliser «ivoire», je l’ai changé pour «theImageIwantToUse». Mais cela ne semble pas fonctionner.

Vous pouvez insérer des images dans votre svg en utilisant l’élément http://www.w3.org/TR/SVG/struct.html#ImageElement

Une fonction appropriée est disponible dans le plugin que vous avez mentionné.

 svg.image(parent, x, y, width, height, ref, settings) 

( http://keith-wood.name/svg.html )

Je doute qu’il soit possible d’utiliser le trait dans une image. Vous devrez donc dessiner un rectangle sans remplissage après avoir dessiné l’image pour obtenir le résultat exact que vous souhaitez.

Vous ne pouvez pas insérer une image externe directement en tant qu’arrière-plan d’objects SVG.

Au lieu de cela, vous devez d’abord créer un modèle comme celui-ci

 var ptn = svg.pattern(defs, "imgPattern", 0, 0, 100, 100, 0, 0, 10, 10, {patternUnits: "userSpaceOnUse"}); svg.image( ptn, 100, 50, 200, 200, "./theImageIwantToUse.png"); 

et utiliser ce modèle puis via la fonction url() dans l’atsortingbut fill

 svg.graph._wrapper.rect(group, 0, 100, 40, 20, {fill: 'url(#imgPattern)', stroke: 'black', strokeWidth : 2});