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

[Myrina]

Je n'avais absolument pas penser au clipping.

Merci, je pense que je devrais m'en sortir.

PS: en exemple, vaut mieux des couleurs crades et tranchantes pour ne pas avoir d’ambiguïté d'interprétation

Edit: Voici le résultat:

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

<!DOCTYPE svg PUBLIC "-_W3C_DTD SVG 1.0_EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd" >

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'

   version="1.1" width="600px" height="400px">

<style type="text/css">

<![CDATA[

.lineb {stroke:black;stroke-width:1px;}

.linew {stroke:white;stroke-width:1px;}

.pt1 {fill:white;}

.pt2 {fill:white;}

.pt3 {fill:black;}

.pt4 {fill:black;}

.pt5 {fill:#0F80C0;}

.pt6 {fill:#0F80C0;}

.pt7 {fill:red;}

.pt8 {fill:red;}

.pt9 {fill:yellow;}

.pt10 {fill:yellow;}

]]>

</style>



<clipPath id="cercle1">

<circle cx="250" cy="175" r="80"/>

<circle cx="350" cy="175" r="80"/>

</clipPath>

<clipPath id="cercle2">

<circle cx="250" cy="175" r="60"/>

<circle cx="350" cy="175" r="60"/>

</clipPath>



<circle cx="250" cy="175" r="100" class="lineb"/>

<circle cx="350" cy="175" r="100" class="lineb"/>

<circle cx="250" cy="175" r="100" class="pt1"/>

<circle cx="350" cy="175" r="100" class="pt1"/>



<circle cx="250" cy="175" r="90" class="lineb"/>

<circle cx="350" cy="175" r="90" class="lineb"/>

<circle cx="250" cy="175" r="90" class="pt2"/>

<circle cx="350" cy="175" r="90" class="pt2"/>



<circle cx="250" cy="175" r="80" class="linew"/>

<circle cx="350" cy="175" r="80" class="linew"/>

<circle cx="250" cy="175" r="80" class="pt3"/>

<circle cx="350" cy="175" r="80" class="pt3"/>



<circle cx="250" cy="175" r="70" class="linew"/>

<circle cx="350" cy="175" r="70" class="linew"/>

<circle cx="250" cy="175" r="70" class="pt4"/>

<circle cx="350" cy="175" r="70" class="pt4"/>



<circle cx="250" cy="175" r="60" class="lineb"/>

<circle cx="350" cy="175" r="60" class="lineb"/>

<circle cx="250" cy="175" r="60" class="pt5"/>

<circle cx="350" cy="175" r="60" class="pt5"/>



<circle cx="250" cy="175" r="50" class="lineb"/>

<circle cx="350" cy="175" r="50" class="lineb"/>

<circle cx="250" cy="175" r="50" class="pt6"/>

<circle cx="350" cy="175" r="50" class="pt6"/>



<circle cx="250" cy="175" r="40" class="lineb"/>

<circle cx="350" cy="175" r="40" class="lineb"/>

<circle cx="250" cy="175" r="40" class="pt7"/>

<circle cx="350" cy="175" r="40" class="pt7"/>



<circle cx="250" cy="175" r="30" class="lineb"/>

<circle cx="350" cy="175" r="30" class="lineb"/>

<circle cx="250" cy="175" r="30" class="pt8"/>

<circle cx="350" cy="175" r="30" class="pt8"/>



<circle cx="250" cy="175" r="20" class="lineb"/>

<circle cx="350" cy="175" r="20" class="lineb"/>

<circle cx="250" cy="175" r="20" class="pt9"/>

<circle cx="350" cy="175" r="20" class="pt9"/>



<circle cx="250" cy="175" r="10" class="lineb"/>

<circle cx="350" cy="175" r="10" class="lineb"/>

<circle cx="250" cy="175" r="10" class="pt10"/>

<circle cx="350" cy="175" r="10" class="pt10"/>



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

 

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

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

	</g>

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

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

	</g>

	

</svg>