Bonjour à tous, 

Je viens vers vous car je suis confronté à un problème.

J'ai converti toutes les images de mon site en SVG. Pour les images qui comportaient un effet d'ombre porté, je ne peux pas convertir cet effet en SVG, j'ai donc appliqué un style drop-shadow en CSS. Jusque là pas de problème. J'ai donc décidé d'aller plus loin et de convertir mon background-image en SVG

Mon problème : Je n'arrive pas à appliquer correctement un drop-shadow aux elements de l'image de mon background

Voici un drop-shadow réussi sur une de mes images : 

Le code :

<svg class="nuage1 ombre-g"......>

.ombre-g {
  -webkit-filter: drop-shadow(-5px 5px 5px rgb(19, 19, 19));
  filter: drop-shadow(-5px 5px 5px rgb(19, 19, 19));
}

c'était assez simple car la class cible l'ensemble de l'image.

Et voici ce que ça donne sur mon background-image : 

L'effet ne s'applique pas autour de l'image mais à l'intérieur de l'image. C'est plus compliqué car je ne cible pas l'image en entier mais un element qui compose l'image.

Voici le bout du code qui cible la partie de l'image :

<path class="ombre-g" class="cls-5" d="M0,468a66.67,66.67,0,0,1,116,20c1.43-1,15.47-10,32-4,14.95,5.46,20.26,19,21,21,12.44-11.62,31-13.58,45-5a37.41,37.41,0,0,1,17,38c1.3-.89,14.85-9.83,30-4a32,32,0,0,1,16,14c2.28-1.26,25.84-13.8,49-2a49.76,49.76,0,0,1,21,21c8.21-3.17,26.45-8.82,47-3,36.94,10.46,58.81,51.62,54.06,57-.7.8-2.32,1.19-6.06,0,14-5.59,28.08,1.7,31,12,2.08,7.36-1.53,16.29-9,22,2.66,3.63,16.5,23.26,11,46-6.21,25.69-34.65,45.29-68.6,43H2Z" transform="translate(2)"/>

.ombre-g {
  -webkit-filter: drop-shadow(-5px 5px 5px rgb(19, 19, 19));
  filter: drop-shadow(-5px 5px 5px rgb(19, 19, 19));
}

Si quelqu'un peut m'aider je suis preneur !

-
Edité par Jokoa 11 mai 2021 à 13:19:47

Salut, il existe une balise <filter> qui va avec svg et il me semble que tu peux créer une dropshadow avec, donc directement en html par contre...

Je vais jeter un oeil pour de la doc, j'éditerai mon message si j'en trouve

Edit : C'est à ça que je pense, j'espère que ça t'aidera !

-
Edité par PookieTreePop 12 mai 2021 à 9:22:18

Salut, merci pour ta réponse.

Le problème c'est que j'aimerais que mon background-image reste dans mon css car quand je le bascule en html mon background-size: cover ne fonctionne plus . Et je n'ai pas réussi à convertir ce que tu me proposes en css..

-
Edité par Jokoa 12 mai 2021 à 12:02:38

Mmh... Je comprends pas, la partie path que tu donnes à la fin de ton premier message c'est bien du HTML...

Oui c’est vrai, je t’explique : Je fais les tests dans le HTML pour ne pas complexifier encore plus le code SVG, ensuite je converti ce code HTML en CSS à l’aide d’un outil en ligne pour ensuite l’intégrer dans mon backgroud-image.

-
Edité par Jokoa 12 mai 2021 à 16:39:38

Ah ! Ouhla ! J'ai jamais fait ça donc je sais pas si je vais pouvoir t'aider... Mais la balise filtre se met dans la balise svg, ton outil en ligne peut pas le convertir ?

Parce que si tu fait ton bg sur Illustrator par exemple et que tu l'enregistre en svg, je sais pas si ça pourrait être une solution...

Non je n’arrive pas à intégrer le filtre en CSS.

Mon bg je l’ai fait sur Illustrator, mais les ombres portées ne peuvent pas être converties en SVG.

Sinon en dernier recours j’ai essayé de lier dans le code SVG les ombres portées en .png en enregistrant le fichier SVG avec l’option « lier ». Ça fonctionne bien en HTML mais en CSS c’est toujours le même problème je ne peux pas appeler les fichiers.

Je ne trouve pas grand chose à ce sujet, à part ceci : <feDropShadow> - SVG | MDN (mozilla.org)

Sinon j'ai la solution avec illustrator d'enregistrer avec l'option "incorporer". Ca génère un genre de code pour mes ombres portées directement dans le code SVG mais le problème c'est que je passe de 115 lignes de code à 815 lignes.. (avant compression) Est-ce qu'il y a une grande incidence si je mets 815 lignes pour un background-image dans mon CSS vous pensez ? Sachant qu'en contre partie je n'ai plus à charger mon image de base JPG qui faisait environ 100KO

-
Edité par Jokoa 14 mai 2021 à 11:33:04

Est-ce que quelqu‘un aurait la réponse à ma question svp ? 

Je remonte un peu mon sujet, si jamais quelqu’un à la réponse à ma question