Fondamentalement, j'ai un fichier SVG qui crée des lignes d'ombre verticales à 45 degrés, ce qui donne un bel effet sur un fond de page web avec un dégradé linéaire à 45 degrés. Cependant, je souhaite ajouter une image au fichier SVG afin qu'entre deux des 6 lignes créées par le SVG il y ait une image. J'ai d'abord essayé de le mettre en place SVG en utilisant CSS, mais cela n'a pas vraiment fonctionné, alors j'ai essayé de regarder comment ajouter des images non vectorielles à un SVG vectoriel, mais comme cette question montre probablement que j'ai peu ou pas de compréhension du fonctionnement des fichiers SVG. Ci-dessous le code du fichier SVG que j'utilise actuellement, j'ai également ajouté une image pour montrer à quoi je voudrais ressembler.Ajouter une image JPEG à un vecteur SVG
Je ne sais pas si cela compte, mais je suis conscient que l'image que je veux ajouter n'est pas un vecteur mais comme l'image que je vais ajouter est très, très grande, je suis assez confiant que la plupart des spectateurs page Web le verra plus petit que sa taille originale, ce qui devrait garder la qualité a-ok.
Si quelqu'un veut jeter un coup d'oeil à ceci et veut m'aider à trouver une solution à mon problème, ce serait très apprécié. Je vous remercie!
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="1000px" viewBox="0 0 1000 1000" zoomAndPan="disable">
<style type="text/css"><![CDATA[
\t \t .p-4 { fill: rgba(255,255,255,0.16); }
\t \t .p-3 { fill: rgba(255,255,255,0.12); }
\t \t .p-2 { fill: rgba(255,255,255,0.08); }
\t \t .p-1 { fill: rgba(255,255,255,0.04); }
\t \t .p0 { fill: none; }
\t \t .p1 { fill: rgba(0,0,0,0.025); }
\t \t .p2 { fill: rgba(0,0,0,0.05); }
\t \t .p3 { fill: rgba(0,0,0,0.075); }
\t \t .p4 { fill: rgba(0,0,0,0.1); }
]]></style>
\t <polygon class="p-4" points="-1125,0 -375,1000 125,1000 -875,0" />
\t <polygon class="p-3" points="-875,0 125,1000 375,1000 -625,0" />
\t <polygon class="p-2" points="-625,0 375,1000 625,1000 -375,0" />
\t <polygon class="p-1" points="-375,0 625,1000 875,1000 -125,0" />
\t <polygon class="p0" points="-125,0 875,1000 1125,1000 125,0" />
\t <polygon class="p1" points="125,0 1125,1000 1375,1000 375,0" />
\t <polygon class="p2" points="375,0 1375,1000 1625,1000 625,0" />
\t <polygon class="p3" points="625,0 1625,1000 1875,1000 875,0" />
\t <polygon class="p4" points="875,0 1875,1000 2125,1000 1125,0" />
</svg>MISE À JOUR SVG FICHIER:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="1000px" viewBox="0 0 1000 1000" zoomAndPan="disable">
<style type="text/css"><![CDATA[
\t \t .p-4 { fill: rgba(255,255,255,0.16); }
\t \t .p-3 { fill: rgba(255,255,255,0.12); }
\t \t .p-2 { fill: rgba(255,255,255,0.08); }
\t \t .p-1 { fill: rgba(255,255,255,0.04); }
\t \t .p0 { fill: none; }
\t \t .p1 { fill: rgba(0,0,0,0.025); }
\t \t .p2 { fill: rgba(0,0,0,0.05); }
\t \t .p3 { fill: rgba(0,0,0,0.075); }
\t \t .p4 { fill: rgba(0,0,0,0.1); }
]]></style>
\t <polygon class="p-4" points="-1125,0 -375,1000 125,1000 -875,0" />
\t <polygon class="p-3" points="-875,0 125,1000 375,1000 -625,0" />
\t <polygon class="p-2" points="-625,0 375,1000 625,1000 -375,0" />
\t <polygon class="p-1" points="-375,0 625,1000 875,1000 -125,0" />
\t <polygon class="p0" points="-125,0 875,1000 1125,1000 125,0" />
\t <polygon class="p1" points="125,0 1125,1000 1375,1000 375,0" />
\t <polygon class="p2" points="375,0 1375,1000 1625,1000 625,0" />
\t <polygon class="p3" points="625,0 1625,1000 1875,1000 875,0" />
\t <polygon class="p4" points="875,0 1875,1000 2125,1000 1125,0" />
\t <image x="20" y="20" width="477" height="640"
xlink:href=../../../images/my_image.png"" />
</svg>
http://tutorials.jenkov.com/svg/image-element.html –
@Paulie_D Merci homme, qui était en fait exactement ce que je cherchais. Trucs assez utile là-bas. J'ai réussi à ajouter mon image au fichier SVG, mais ce que je n'arrive pas à comprendre, c'est comment je peux le verrouiller avec les polygones pour qu'il reste de la même taille lors du zoom avant ou arrière (mon design est réactif donc il est important que l'image J'ai ajouté au SVG reste la même taille lors d'un zoom avant ou arrière puisque le reste du SVG le fait aussi). – Narc
Il devrait conserver sa position par rapport aux autres éléments du SVG. Veuillez poster votre SVG mis à jour afin que nous puissions voir ce que vous avez fait. –