SVG - dégradé - Version imprimable

SVG - dégradé - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : SVG - dégradé (/showthread.php?tid=7114)

Pages : 1 2 3 4

RE: SVG - dégradé - @lucard - 15-11-2014

À mon humble avis, il s'agit simplement d'un problème d'échelle. Si ton image est à l'échelle 1/1 , essaye de mettre le stroke à 0.2px et le fegaussianblur à 0.5. Bref essaye de trouver toi-même la bonne proportion, et au besoin, "Read The Fucking Manual" . :-)

RE: SVG - dégradé - Xenos - 17-11-2014

Je rejoins @lucard sur le principe: le flou gaussien est probablement trop large.

Mais ce n'était pas un "inner glow" qui était demandé? Là, c'est un "outer glow" (le flou est à l'extérieur de l'objet "planète").

Pour le coup, j'aurai juste créé un autre objet "cercle rouge", sous la planète et de même taille (il suffit de considérer que la "planète" est un fait le groupe <g/> svg cercle[rouge]+image[planète] et non plus image[planète] seule) et je lui aurai appliqué un filtre <feGaussianBlur> en veillant à la Filter Effect Region pour que le filtre ne "tronque" pas le flou (la bounding box du filtre doit contenir la totalité du flou, qui est plus gros que l'objet original).

RE: SVG - dégradé - @lucard - 17-11-2014

(17-11-2014, 10:48 AM)Xenos a écrit : Pour le coup, j'aurai juste créé un autre objet "cercle rouge", sous la planète et de même taille (il suffit de considérer que la "planète" est un fait le groupe <g/> svg cercle[rouge]+image[planète] et non plus image[planète] seule) et je lui aurai appliqué un filtre <feGaussianBlur> en veillant à la Filter Effect Region pour que le filtre ne "tronque" pas le flou (la bounding box du filtre doit contenir la totalité du flou, qui est plus gros que l'objet original).

+1
j'aurais également procédé ainsi.

Mettre un cercle (géométriquement parlant c'est un disque) en dessous de l'image de la planète et un gaussianBlur (sur le disque) mais pour ça faut une image de planète; à bord lisse, nette, mais avec l'antialiasing.

Sinon plus simple et t'auras même pas besoin de SVG et de RTFM:
faire apparaître une image png de halo en :hover.

comme ça :

RE: SVG - dégradé - Xenos - 17-11-2014

Pour la planète, tu peux prendre une texture de sol, la sphériser dans photoshop, obtenir ainsi une texture carrée que tu appliques à l'intérieur d'un circle, et placer dessous le halo:

(cliquez sur l'image pour l'ouvrir, sinon la texture ne sera pas chargée)

Evidemment, ma texture étant un peu petite, elle pixelise..
On peut, après, pousser bien plus loin, mais c'est plutôt "bricolé" et cela pourrait être lourd (7Mo ici!) pour pas grand chose (simple esthétisme):

(idem)