Trait vertical sur affichage d'élément SVG

Version imprimable

2 pièce(s) jointe(s)

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 :
Pièce jointe 477502

Et voici avec les autres navigateurs :
Pièce jointe 477508

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:

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

23/05/2019, 15h39
psychadelic

je pense que c'est uniquement du à ce que tu a mis dans les classes

Citation:

class => fleche precedent debut fin

J'ai effectivement oublié de vous joindre mon CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 .fleche{ cursor: pointer; } .precedent.debut{ fill: url(#debut-gauche); } .precedent.fin{ fill: url(#fin-gauche); } .suivant.debut{ fill: url(#debut-droite); } .suivant.fin{ fill: url(#fin-droite); } .refresh.arrow{ fill: url(#today-arrow); } .refresh.circle{ stroke: url(#today-circle); }
En revanche j'ai remarqué qu'en jouant avec la taille du navigateur, cette séparation disparaît parfois. Je ne sais pas d'où cela peut provenir

23/05/2019, 18h20
psychadelic

oui, j'arrive à voir le pb sous FireFox en mettant le zoom à 240%.

pour moi c'est du à une interprétation erronée par le moteur svg (on voit qu'il rajoute une bordure avec la Pippette FF)

Je ne pense pas que cela puisse ce régler autrement qu'en décrivant tes formes via un path unique pour remplacer chacun des 3 groupes de polygone / cercle.

D'ailleurs sous Chrome le pb se voit moins, mais en zoomant on peut voir une "non progressivité du dégradé" aux jonctions entre 2 éléments; les réunir en un seul permettrai aussi de n'utiliser qu'un unique dégradé

Merci pour le conseil du path, c'était assez facile pour les 2 flèches, un peu plus complexe pour l'icône "Refresh".

Mais en tout cas cela fonctionne parfaitement maintenant, je n'ai plus le bug visuel.

Je laisse mon nouveau code au cas où :

Code:

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
<svg height="80" width="364">
	<defs>						
		<linearGradient id="fleche-gauche" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="0%" style="stop-color:rgb(254, 172, 94);stop-opacity:1" />
			<stop offset="50%" 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="fleche-droite" 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(199,121,208);stop-opacity:1" />
			<stop offset="100%" style="stop-color:rgb(254, 172, 94);stop-opacity:1" />
		</linearGradient>
 
		<linearGradient id="refresh" 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>
	</defs>
 
	<path class="fleche precedent" d="M0 36 L 54 0 L 54 18 L 120 18 L 120 54 L 54 54 L 54 72 Z" />
 
	<path class="fleche refresh" d="M182 8 A 32 32, 0, 1, 1, 150 40 L 170 40 A 12 12, 0, 1, 0, 182 28 L 182 36 L 150 18 L 182 0 Z"/>
 
	<path class="fleche suivant" d="M242 18 L 308 18 L 308 0 L 362 36 L 308 72 L 308 54 L 242 54 Z"/>
</svg>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.fleche{
	cursor: pointer;
}
.fleche:hover{
	opacity: 0.7;
}
.fleche.precedent{
	fill: url(#fleche-gauche);
}
.fleche.refresh{
	fill: url(#refresh);
}
.fleche.suivant{
	fill: url(#fleche-droite);
}

Encore merci pour ton aide.

24/05/2019, 16h30
NoSmoking

Bonjour,
il est effectivement mieux de n'avoir que des « éléments complets », cependant lorsque l'on souhaite faire une figure avec d'autres il est préférable de ne pas les mettre à côté mais de les superposer, un seul pixel suffit, tout ceci lié à l'anti-aliasing pratiqué par les navigateurs.

Il existe toutefois, dans le cas de la non superposition, un attribut qui peut s’avérer utile pour les traits horizontaux et/ou verticaux, j'ai nommé l'attribut shape-rendering.

Ressource :
↪ https://www.w3.org/TR/SVG11/painting...ringProperties
24/05/2019, 17h12
marseillx3

Bonjour,

J'avais effectivement pensé à superposer les 2 éléments, mais le problème était qu'au survol, je passais les 2 éléments en opacity: 0.7, ce qui fait qu'on voyait la superposition à ce moment là.

Je viens de tester à l'instant l'attribut shape-rendering et effectivement cela aurait pu faire l'affaire.

Mais comme tu l'as dit, finalement c'est plus pratique de n'avoir que des éléments complets, tant au niveau du rendu que pour l'application de CSS.

Merci pour ton aide
24/05/2019, 18h32
NoSmoking

Une autre chose tant que l'on y est, il existe l'élément <g> qui permet de regrouper des éléments et qui est pratique pour les hover, notamment, car il réagit uniquement sur la surface occupée par ses éléments enfants mais il « fill » chaque élément séparément.