1px belirttiğimde neden SVG hattım bulanık veya 2px yüksekliğinde?

Question

SVG ile bir çizgi oluşturuyorum ve web sayfamda bulanık görünüyor. Daha açık olmak gerekirse, 1px inme genişliğinden daha büyük görünür. Bu neden oluyor ve SVG'de düzeltmenin bir yolu var mı?

İşte kod. Bu kodu kendi başıma çalıştırdığımda bulanık değil. Benim web sayfasında geldiğinde onun Y tam pikselden üzerinde yalan koordinatları zaman 1px inme böylece etrafında olup Çünkü çizgi 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>

Answer 1

yerine yaklaşık 2px yüksekliğinde olduğu anlaşılıyor "kenar yumuşatma". Yarım piksel bu durumda koordinatları kullanın veya sizin için yuvarlama pikseli yapacak shape-rendering="crispEdges" uygulamak, ama daha yuvarlak nesneler üzerinde keskin kenarları üretecek: [adjecent arasındaki çizgiler kaçınmak ait

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>