JeuWeb - Crée ton jeu par navigateur
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 - 28-10-2014

la composante feColorMatrix…
effectivement, mais c'est une plaie à paramétrer sans calculatrice (ou sans feuille sous la main).

dans ce cas là c'est plus les valeurs <style> qu'il faut changer mais les "floodcolor" du svg.

RE: SVG - dégradé - @lucard - 29-10-2014

(28-10-2014, 04:42 PM)Xenos a écrit : Je pensais à ce genre-là en fait.

Le plus gros problème c'est que tu ne peux pas définir de fond (autre que "black")
si tu as une image, alors ton dégradé engendrera de drôle de surprise de ce genre-là Confusediffle:

RE: SVG - dégradé - Xenos - 30-10-2014

On s'en fiche du feColorMatrix: il ne sert qu'à discriminer l'intérieur (noir), le contour (blanc) et l'extérieur (transparent) du pays.
Seules les 3 feFlood du haut définissent les couleurs du rendu final (vert pour le fonc, bleu pour l'intérieur et rouge pour le contour).

Le fill & stroke dans le code <style> servent seulement à définir deux couleurs distinctes pour le contour et l'intérieur.
Remplace le "fill:url(#MAP);" par "fill:black" et joue sur les couleurs feFlood: un fond "flood-color='transparent'" rend le fond du pays transparent Wink

<svg

	version="1.1"

	viewBox="0 0 2000 2000"

	style="background:lightgrey;max-width:600px"

	preserveAspectRatio="xMidYMax meet"

	xmlns="http://www.w3.org/2000/svg"

	xmlns:xlink="http://www.w3.org/1999/xlink"

  >

	

	<defs>

    <pattern

       id="MAP"

       height="100%"

       width="100%"

       patternUnits="userSpaceOnUse">

      <image

         xlink:href="http://www.loveinfographics.com/wp-content/uploads/2012/02/european-highway-speed-limits-transport-infographics-600x600.gif"

         y="0"

         x="0"

         id="image9"

         height="100%"

         width="100%" />

    </pattern>

		<filter id="glow">

			<feFlood		flood-color="blue"	result="glowcolor"/>

			<feFlood		flood-color="transparent"	result="fillcolor"/>

			<feFlood		flood-color="red"	result="strokecolor"/>

			

			<feGaussianBlur	stdDeviation="80"	in="SourceGraphic"		result="glow0"/>

			<feComposite	in="glow0"			in2="SourceAlpha"		operator="in"	result="glow1"	/>

			<feColorMatrix	in="glow1" 			values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 1 1 0 0"	result="glow2"/>

			<feComposite	in="glowcolor"		in2="glow2"		operator="in"	result="glow"/>



			<feComposite	in="fillcolor"		in2="SourceGraphic"	operator="in"	result="fill"/>

			<feColorMatrix	in="SourceGraphic"	type="luminanceToAlpha" result="strokealpha"/>

			<feComposite	in="strokecolor"	in2="strokealpha"	operator="in"	result="stroke"/>

			<feMerge>

				<feMergeNode in="fill"/>

				<feMergeNode in="glow"/>

				<feMergeNode in="stroke"/>

			</feMerge>

		</filter>

		<style>

			.borders

			{

				fill:black;

				stroke:				white;

				stroke-width:		5;

			}

			.blur			{				filter:				url(#glow);			}

		</style>

	</defs>

  <image

       y="0"

       x="0"

       id="MAP-BG"

       xlink:href="http://www.loveinfographics.com/wp-content/uploads/2012/02/european-highway-speed-limits-transport-infographics-600x600.gif"

       height="100%"

       width="100%" />

	<path class="borders blur" id="france" d="..." />

  </svg>

Disséquons le filtre



<feFlood		flood-color="blue"	result="glowcolor"/>

<feFlood		flood-color="transparent"	result="fillcolor"/>

<feFlood		flood-color="red"	result="strokecolor"/>
On définit 3 couleurs qui remplissent l'espace (bounding rectangle) occupé par l'objet sur lequel le filtre s'applique. Le résultat de cet aplat de couleur uni est stocké sous trois différents noms (assez explicites).

<feGaussianBlur stdDeviation="80" in="SourceGraphic" result="glow0"/>
On floute l'objet entrant, qui est la carte de france dont l'intérieur est noit et le contour est blanc. Ce flou génère donc un effet de halo intérieur, blanc (couleur du stroke). On remplacera la couleur par la suite.

<feComposite in="glow0" in2="SourceAlpha" operator="in" result="glow1"/>
On prend le résultat du filtre précédent (le flouté), et on le restreint à la zone intérieur + contour de l'objet auquel le filtre est appliqué. Ainsi, on ne garde que le flou "interne", et non le flou qui "déborde" de la carte.

<feColorMatrix	in="glow1" 			values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 1 1 0 0"	result="glow2"/>
Maintenant, on récupère uniquement ce flou interne. Rappelez-vous: on avait précédemment du noir pour l'intérieur, du blanc pour le contour (le halo interne) et du transparent pour l'extérieur de l'objet. Ici, on supprime le noir, pour ne garder que le flou blanc interne.
Rappel du fonctionnement de "values" dans feColorMatrix:
Code :
RougeFinal = RougeOriginal*0+VertOriginal*0+BleuOriginal*0+AlphaOriginal*0+1
VertFinal = RougeOriginal*0+VertOriginal*0+BleuOriginal*0+AlphaOriginal*0+1
BleuFinal = RougeOriginal*0+VertOriginal*0+BleuOriginal*0+AlphaOriginal*0+1
AlphaFinal = RougeOriginal*1+VertOriginal*1+BleuOriginal*1+AlphaOriginal*0+0
Du coup, tout est mis en blanc, mais seule la zone originalement blanche (ou en tous cas, non noire) est opaque, le reste ayant un alpha de 0.

Au bout de ce filtre, on récupère donc du blanc intégrale, mais seule la zone du halo (originalement blanche d'ailleurs) est opaque.

<feComposite in="glowcolor" in2="glow2" operator="in" result="glow"/>
On applique la couleur issue du feFlood au flou interne que l'on a construit.

<feComposite	in="fillcolor"		in2="SourceGraphic"	operator="in"	result="fill"/>
Idem, on applique la couleur du feFlood pour l'intérieur de l'objet.

<feColorMatrix	in="SourceGraphic"	type="luminanceToAlpha" result="strokealpha"/>

<feComposite	in="strokecolor"	in2="strokealpha"	operator="in"	result="stroke"/>
Et enfin, pour le contour. Ici, on procède en deux étapes: en se basant sur l'objet auquel le filtre est appliqué (SourceGraphic), on isole la zone blanche (le contour) grâce à luminanceToAlpha, puis à ce contour, on applique la couleur choisie dans feFlood.

<feMerge>

	<feMergeNode in="fill"/>

	<feMergeNode in="glow"/>

	<feMergeNode in="stroke"/>

</feMerge>
Et on fusionne tout cela, dans l'ordre (le fond d'abord, par-dessus le flou, par-dessus le stroke).

Même si beaucoup de dev n'aiment pas le faire, lire les spécifications du SVG est bien plus enrichissant que chercher des tutos à recopier Wink

RE: SVG - dégradé - @lucard - 30-10-2014

Xenos le pédagogue.

Merci pour cette dissection partagée.
Quand je vois des chiffres à rallonge, sans vraiment trop savoir ce que c'est, j'ai plus souvent l'habitude de passé outre [ou la flème de chercher à comprendre], et de trouver une alternative qui sera plus simple sur le moment.

RE: SVG - dégradé - Xenos - 30-10-2014

Exemple édité pour:
• Tester avec une image au lieu d'un contour SVG (le truc moche qui passe devant la France est une image
• Tester un fond transparent (comme ca, on peut avoir un fond de carte en PNG par exemple, et afficher par-dessus, le pays avec son contour & glow interne)
• Tester l'animation de la couleur du glow (pour le faire varier, comme l'exemple d'Alucard)
• Tester l'animation de l'élément sur lequel le filtre est appliqué (histoire de voir ce que cela donne)

Note que le filtre est peut être un poil lent sur une image raster si on souhaite animer la couleur du glow.

RE: SVG - dégradé - Wells - 30-10-2014

OUla, vais lire tout ca et je vous dirais ce que donne mon code final Wink

RE: SVG - dégradé - @lucard - 31-10-2014

j'ai un doute concernant la "facilité" d'appliquer le filtre seulement en :hover / onmouseover.

"Ma" méthode est certes "plus bricoler", mais elle à peut-être l'avantage d'être plus simple s'il y a des Events par dessus... non ?
j'ai tester un "onmouseover" avec les pays voisins et j'ai pas de problème à ne "rien afficher si la souris n'est pas dessus" contrairement au FeMatrixColor (qui à besoin d'un fond noir).

RE: SVG - dégradé - Xenos - 31-10-2014

Heu, si tu n'as besoin de l'effet que sur un event, tu mets le filtre et les fill/stroke dans l'event:



.pays:hover

{

 fill:black;

stroke:white;

filter:url(#SuperFiltre);

}

.pays

{

fill:transparent;

stroke:black;

}

.pays.allie

{

stroke:green;

}

.pays.ennemi

{

stroke:red;

}
+


<path class="pays allie" d="..."/> <!-- stroke green en temps normal, filter+stroke white+fill black sur :hover -->

<path class="pays" d="..."/> <!-- stroke blacken temps normal, filter+stroke white+fill black sur :hover -->

<path class="pays ennemi" d="..."/> <!-- stroke red en temps normal, filter+stroke white+fill black sur :hover -->


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

(31-10-2014, 12:25 PM)Xenos a écrit : Heu, si tu n'as besoin de l'effet que sur un event, tu mets le filtre et les fill/stroke dans l'event:
Certes, j'aime me compliquer la vie.

(24-10-2014, 02:59 PM)Wells a écrit : je te remercie de ton aide, j'en était venu à penser que c'etait impossible. Je vais tester tout ca et je reviens vers toi avec qq screen Wink
(30-10-2014, 05:34 PM)Wells a écrit : OUla, vais lire tout ca et je vous dirais ce que donne mon code final Wink

Alors ? des screens ? des infos ?

RE: SVG - dégradé - Wells - 04-11-2014

J’avoue que je suis pas au niveau . le soucis de vouloir faire un exemple complet (c'est pas un reproche hein) c'est que moi j'y comprend rien.

Pourrais je avoir un exemple simple avec un path (en forme de carré par exemple), qui a à la fois une bordure de 5px rouge, et un dégradé de couleurs qui suit le contour de couleur bleu.



En attendant, un petit résultat de mes essais :

http://wells83.free.fr/IMAGES/carto.png