Perché la mia linea SVG è sfocata o alta 2px quando ho specificato 1px?

Sto creando una linea con SVG e appare sfocata nella mia pagina web. Per essere più chiaro, sembra più grande della larghezza del tratto di 1px. Perché sta succedendo questo e c'è un modo per risolverlo in SVG?Perché la mia linea SVG è sfocata o alta 2px quando ho specificato 1px?

Ecco il codice. Quando eseguo questo codice da solo, non è sfocato. Quando è nella mia pagina web linea sembra essere di circa 2px in altezza anziché 1.

#HorizontalLine1178 { 
 
\t stroke:rgb(154,154,154); 
 
\t stroke-width:1; 
 
}

<svg style="width:100%;"> 
 
    <line id="HorizontalLine1178" y2="97" y1="97" x2="100%" x1="62" > 
 
</svg>

fonte

2015-12-11 1.21 gigawatts

Possibile duplicato [Evitare linee tra adjecent rettangoli svg] (http://stackoverflow.com/questions/23376308/avoiding-lines-between-adjecent-svg-rectangles) –

@PaulLeBeau Ho aggiornato il post. la risposta di myf include nuove informazioni aggiuntive non nell'altro post. –

Per dare il merito dove è dovuto, commenta anche Pauls nelle sue risposte; è possibile che l'abbia anche imparato da quel momento: https://stackoverflow.com/questions/23376308/avoiding-lines-between-adjecent-svg-rectangles#comment56203656_23376793 – myf

Perché quando le sue coordinate Y giace su pixel intero, la corsa 1px è intorno ad esso e così "antialiasing". Utilizza coordinate mezzo pixel in questo caso, o applicare shape-rendering="crispEdges" che farà il pixel arrotondamento per te, ma producono spigoli anche su oggetti arrotondati:

rect , circle, line { 
 
\t stroke: rgb(154,154,154); 
 
\t stroke-width: 1; 
 
\t fill: none; 
 
}

<svg style="width:100%;"> 
 
\t <line y2="10.0" y1="10.0" x2="90%" x1="10" /> 
 
\t <line y2="15.5" y1="15.5" x2="90%" x1="10" /> 
 
\t <line y2="20.0" y1="20.0" x2="90%" x1="10" shape-rendering="crispEdges" /> 
 
\t <circle cy="50" cx="20" r="10" /> 
 
\t <circle cy="50" cx="50" r="10" shape-rendering="crispEdges" /> 
 
\t <rect x="90" y="40" width="20" height="20" /> 
 
\t <rect x="120" y="40" width="20" height="20" shape-rendering="crispEdges" /> 
 
\t <rect x="149.5" y="39.5" width="20" height="20" /> 
 
\t <rect x="190" y="40" width="20" height="20" style="stroke: none; fill: black" /> 
 
</svg>

fonte

2015-12-11 17:50:55 myf

Grandi esempi. Quindi se so in anticipo che un tratto è 1px in altezza (linea orizzontale) e la posizione verticale è un numero dispari, "81" non "80" di quanto dovrei cambiare la posizione y su "81.5" per mantenere la linea 1px in altezza? –

NON ha visto il tuo aggiornamento. L'impostazione crisp Edges è eccezionale. Perché hai messo Line per non avere un riempimento? Hanno un riempimento di default? –

Non dispari/pari: per i * tratti * tenere presente che sono resi * attorno a * linee che collegano le coordinate date e che le coordinate intere indicano i limiti dei pixel. Vedi la risposta di Paul nella domanda collegata, la descrive meglio. Ad 'fill' per linea: no, lo ha semplicemente distrutto nel selettore per influenzare' rect's. – myf

Perché la mia linea SVG è sfocata o alta 2px quando ho specificato 1px?

risposta

Problemi correlati