5546 sujets

Sémantique web et HTML

Bonjour,
Je ne parviens pas à texturer un svg.
Essai préalable pour info :
j'approchais plus du résultat voulu à l'utilisation de la syntaxe commentée mais avec un décalge impossible à annuler et en codant le fill avec none.


<svg class="bandeau-svg-1 d-none d-sm-block";version="1.1" x="0px" y="0px" viewBox="0 0 649 578">
<defs> 
<filter id="texture">
<href="images/texture1.jpg"/>
</filter>
</defs>
<!--<image href="images/texure1.png" x="0" y="0" height="100%" width="100%" />-->
<path fill="url(#texture)" d="M-225.5,154.7l358.45,456.96c7.71,9.83,21.92,11.54,31.75,3.84l456.96-358.45c9.83-7.71,11.54-21.92,3.84-31.75 L267.05-231.66c-7.71-9.83-21.92-11.54-31.75-3.84l-456.96,358.45C-231.49,130.66-233.2,144.87-225.5,154.7z"/>
</svg>


Impossible de trouver ma solution.
Merci.
La texturisation d'un SVG via une image peut s'avérer un peu délicate. La syntaxe que vous avez utilisée ne semble pas correcte. Vous pouvez utiliser la balise <pattern> et <image> à l'intérieur des <defs> pour définir une texture, puis l'appliquer à votre élément <path> via l'attribut fill.

Voici un exemple basé sur votre code :

<svg class="bandeau-svg-1 d-none d-sm-block" version="1.1" x="0px" y="0px" viewBox="0 0 649 578">
<defs>
<pattern id="texture" patternUnits="userSpaceOnUse" width="649" height="578">
<image href="images/texture1.jpg" x="0" y="0" width="649" height="578" />
</pattern>
</defs>
<path fill="url(#texture)" d="M-225.5,154.7l358.45,456.96c7.71,9.83,21.92,11.54,31.75,3.84l456.96-358.45c9.83-7.71,11.54-21.92,3.84-31.75 L267.05-231.66c-7.71-9.83-21.92-11.54-31.75-3.84l-456.96,358.45C-231.49,130.66-233.2,144.87-225.5,154.7z" />
</svg>


Dans cet exemple, la balise <pattern> a été définie avec un identifiant "texture", et les dimensions du motif ont été définies pour correspondre à la vue du SVG. L'image de texture est ensuite incluse dans la balise <pattern> avec la balise <image>. Ensuite, l'attribut fill de la balise <path> est défini pour utiliser l'URL de la définition du motif. Cette syntaxe devrait appliquer la texture à votre path SVG.

Si l'image de texture ne s'aligne pas correctement, vous pourrez ajuster les attributs width, height, x et y de la balise <pattern> et/ou <image> pour obtenir l'effet souhaité.