[Résolu][SVG]Faire varier la couleur (stroke)

[Xenos]

Comme ceci [lien supprimé depuis]. Les navigateurs ne supportent pas encore la valeur "BackgroundImage" pour l'attribut "in" d'un filtre SVG. Or, ce moyen t'aurai permis de faire facilement ce que tu souhaites (car ce moyen t'aurai permis de définir la couleur à afficher pour un pixel de l'objet en fonction de la couleur en arrière-plan).

L'alternative proposée (cf lien de début de message) permet de simuler le comportement.
Elle se base sur clip-path. Cette propriété permet de réduire la zone d'affichage d'un groupe d'éléments. On peut ainsi:

• Dessiner un cercle
  
• Dessiner une courbe par-dessus, d'une première couleur (partout, même dans le cercle)
  
• Dessiner une seconde courbe, identique mais d'une autre couleur, que l'on "clip" sur le cercle

Ainsi, le cercle est dessiné en 1er, puis la courbe "pleine", puis le morceau de courbe coloré, par-dessus la zone du cercle.

L'exemple SVG joint ajoute un peut d'animation, juste pour rigoler ^^ Mais le code d'animation est dégueulasse, ne le prends pas en exemple! :o Ne considère, dans le code source, que la partie sur le clip-path:

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

<!--

	© 2013 - MONIER Vincent

	Exemple d'utilisation de clip-path pour SVG

	L'animation javascript n'est pas à prendre en compte:

	sont code est dégueulasse.

	Clip-path permet de masquer le rendu d'un objet à une forme donnée.

	Donc, on crée un "fantome" (le clip) d'un cercle.

	On dessine ensuite un autre cercle, de même taille que le clip, et à la même place.

	On dessine, par-dessus, une courbe, générique

	Enfin, on dessine une courbe d'une autre couleur, que l'on "clip" avec le fantome précédent.

	On a ainsi !!l'impression!! (c'est pas "vrai" au fond, c'est juste la vue que l'on voit)

	qu'il n'existe qu'une courbe, et que celle-ci change de couleur du niveau de l'unique cercle que l'on voit.

	

	Licence CeCILL

-->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

	<script>

		var a = 0;

		setInterval(function ()

		{

			var c1 = document.getElementById('my-circle');

			var c2 = document.getElementById('my-circle-2');

			var b = a/360*2*Math.PI;

			var X = 150 + Math.cos(b)*50, Y = 150 + Math.sin(b)*50;

			c1.setAttribute('cx', X);

			c1.setAttribute('cy', Y);

			c2.setAttribute('cx', X);

			c2.setAttribute('cy', Y);

			a++;

		},

		30

		);

	</script>



	<clipPath id="my-area">

		<circle r="50" cx="150" cy="150" id="my-circle"/>

	</clipPath>



	<circle fill="purple" r="50" cx="150" cy="150" id="my-circle-2"/>



	<path d="M 100 250 q 150 -300 300 0" stroke="black" stroke-width="5" fill="none"/>



	<g clip-path="url(#my-area)">

		<path d="M 100 250 q 150 -300 300 0" stroke="green" stroke-width="5" fill="none"/>

	</g>

</svg>

(Et oui, j'aime les couleurs bien crades qui ne vont pas ensemble!)