JeuWeb Créez votre jeu par navigateur !

**Xenos** · (Modification du message : 30-10-2014, 03:15 PM par Xenos.)

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