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 - 04-11-2014

du genre ça :



<svg

	version="1.1"

	viewBox="0 0 200 200"

	style="max-width:600px"

	preserveAspectRatio="xMidYMax meet"

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

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

  >

 

	<defs>

   <!-- début du fitlre -->

		<filter id="glow">

				<!-- couleur de la bordure interne -->

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

				<!-- couleur du fond de la forme -->

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

				<!-- couleur de la bordure  -->

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

 				<!-- Epaisseur du flou gaussien -->

			<feGaussianBlur	stdDeviation="20"	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>

 <!-- Fin du filtre -->

	</defs>

 				<!-- Forme -->

<path class="borders blur" id="Square" d="M 50,50 150,50 150,150 50,150 z" />

  </svg>

 

svg 

{	/* ici on met une image en background : un fond étoilé */

	background: 	url('http://iliketowastemytime.com/system/files/outer-space-hd-wallpaper.jpg');

}

.borders

{

	fill:			black;

	stroke:			white;

	stroke-width:		5px;

}

.blur

{

	filter:			url(#glow);	

}

Exemple

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

Je test et je vous montre Smile

J'aimerais agrandir un peu l'effet de halo.

A priori, ca ce joue avec cette partie : <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"/>

Mais comment savoir a quoi correspond tt ces chiffres ? Sad

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

Je dirai bien RTFM, mais on va faire plus constructif.
Cette ligne met la couleur de chaque pixel à blanc, et l'opacité est dictée par la couleur initiale du pixel (pixel initialement noir = transparent).
Si tu veux que l'opacité intervienne plus vite, pour "contraster" le dégradé, il faut changer les trois derniers "1 1 1" par un nombre plus grand, type "3 3 3". Baisse la largeur du flou (feGaussianBlur) si besoin.

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

Bon ça à l'air pas mal, du coup puis je modifier ce code pour faire l'inverse :

un effet de halo lumineux autour d'une planète (d'une couleur choisit) ?

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

[#23eme message, première phrase : +1]

on inverse le masque (dedans → dehors) donc in→out
<feComposite in="glow0" in2="SourceAlpha" operator="out" result="glow1" />
[...]

et on inverse la composante alpha de la matrice : le flou doit être dans l'autre sens :
<feColorMatrix in="glow1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" result="glow2"/>

il faut bien sur que tu reprennes l'ensemble du code précédent (que tu renommes autrement (id)) et ensuite : que tu cahnge la couleur "
<feFlood flood-color="#couleurquetuauraschoisis" result="glowcolor"/>

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

Juste pour un test :

<circle cx="{$placer_x}" cy="{$placer_y}" r="10" style="filter:url(#dropshadow);"/>

Code :
<filter id="dropshadow">

                    <feFlood        flood-color="#ff0000"            result="glowcolor"/>

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

                    <feFlood        flood-color="#0000ff"               result="strokecolor"/>

                    <feGaussianBlur    stdDeviation="40"    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>

Rien ne s'affiche. je pense que ca ne fonctionne pas sur un element circle :'(

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

Mais bien sûr que si, cela marche sur tout élément dès l'instant où il est traitable par SVG, où la zone blanche (de la forme de initiale) représente la frontière et la zone noire (de la forme de initiale) l'intérieur de l'objet.



<?xml version="1.0" encoding="utf-8"?>



<svg

	version="1.1"

	viewBox="0 0 30 30"

	preserveAspectRatio="xMidYMax meet"

	class=""

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

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



	<defs>

		<filter id="dropshadow">

			<feFlood        flood-color="#ff0000"            result="glowcolor"/>

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

			<feFlood        flood-color="#0000ff"               result="strokecolor"/>



			<feGaussianBlur    stdDeviation="2"    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>

	</defs>

	<circle cx="15" cy="15" r="10" style="filter:url(#dropshadow);fill:black;stroke:white;"/>

</svg>

RTFM

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

Code :
<filter id="dropshadow">

                    <feFlood        flood-color="#ff0000"            result="glowcolor"/>

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

                    <feFlood        flood-color="#ff0000"               result="strokecolor"/>

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

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

                    <feColorMatrix in="glow1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 5 0 0 0 5 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>

J'ai inverser en metant en out, mais ca donne pas grand chose :

http://foot2014.septentrion-game.com/carto2.png

Ca fait juste un cercle, c'est pas terrible, j'ai du oublié un truc ^^

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

<filter xmlns="http://www.w3.org/2000/svg" id="dropshadow">

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

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

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

         

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

                    <feComposite in="glow0" in2="SourceAlpha" operator="out" 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>

Citation :<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"/>

RTFM

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

Hum, en recopiant tel quel:

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

Y a comme un truc qui tourne pas rond (ben ouais ca fait des carrés :p)

Edit:

pour etre clair je cherche a faire un effet de halo comme suit:

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