Discussion :

[marseillx3]

Bonjour à tous,

J'ai un petit problème d'affichage SVG sur Firefox, Edge et IE que je n'ai pas avec Google Chrome.

Voici le rendu avec Google Chrome :


Et voici avec les autres navigateurs :


Comme vous pouvez le constater, avec les autres navigateurs, on voit une ligne de séparation entre mes différents éléments (entre les triangles et les rectangles par exemple) alors que sur Chrome on ne le voit pas.

Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<svg height="80" width="364">
	<defs>
		<linearGradient id="debut-gauche" x1="0%" y1="0%" x2="100%" y2="0%">
		        <stop offset="0%" style="stop-color:rgb(254, 172, 94);stop-opacity:1" />
			<stop offset="100%" style="stop-color:rgb(199,121,208);stop-opacity:1" />
		</linearGradient>
		<linearGradient id="fin-gauche" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" style="stop-color:rgb(199,121,208);stop-opacity:1" />
			<stop offset="100%" style="stop-color:rgb(50,200,255);stop-opacity:1" />
		</linearGradient>
 
		<linearGradient id="today-arrow" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" style="stop-color:rgb(50,200,255);stop-opacity:1" />
			<stop offset="100%" style="stop-color:rgb(30,220,255);stop-opacity:1" />
		</linearGradient>
		<linearGradient id="today-circle" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" style="stop-color:rgb(50,200,255);stop-opacity:1" />
			<stop offset="50%" style="stop-color:rgb(30,220,255);stop-opacity:1" />
			<stop offset="100%" style="stop-color:rgb(50,200,255);stop-opacity:1" />
		</linearGradient>
 
		<linearGradient id="debut-droite" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" style="stop-color:rgb(50,200,255);stop-opacity:1" />
			<stop offset="100%" style="stop-color:rgb(199,121,208);stop-opacity:1" />
		</linearGradient>
		<linearGradient id="fin-droite" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" style="stop-color:rgb(199,121,208);stop-opacity:1" />
			<stop offset="100%" style="stop-color:rgb(254, 172, 94);stop-opacity:1" />
		</linearGradient>
 
		<clipPath id="cut-off-bottom">								
			<rect x="150" y="40" width="64" height="32" />
			<rect x="182" y="0" width="32" height="64" />
		</clipPath>
	</defs>
 
	<polygon class="fleche precedent debut" points="0,36 54,0 54,72" />
	<polygon class="fleche precedent fin" points="54,18 120,18 120,54 54,54"/>
 
	<circle class="fleche refresh circle" cx="182" cy="40" r="22" fill="transparent" stroke-width="20" clip-path="url(#cut-off-bottom)"/>							
	<polygon class="fleche refresh arrow" points="182,0 182,36 150,18" />
 
	<polygon class="fleche suivant fin" points="308,0 362,36 308,72" />
	<polygon class="fleche suivant debut" points="242,18 308,18 308,54 242,54"/>
</svg>

D'où peut venir ce problème et comment faire pour ne plus voir cette démarcation ?

Merci d'avance pour votre aide