1pxを指定したときにSVG線がぼやけているか、高さが2pxですか？

Question

私はSVGでラインを作成していますが、私のウェブページにはぼやけて見えます。より明確にするには、1pxのストローク幅よりも大きく表示されます。なぜこれが起こっていて、それをSVGで修正する方法がありますか？ここで

はコードです。このコードを単独で実行すると、ぼやけていません。それは私のWebページにありますと、そのYが画素全体に嘘を調整する際に、1pxストロークは、このようにその周りにあるとあるのでラインの高さは2ピクセルではなく、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

程度であるように思われます"アンチエイリアス"。半画素、この場合には座標を使用、またはあなたのための丸めピクセルを行いますshape-rendering="crispEdges"を適用するが、それでも丸い物体にシャープなエッジを生成します：[adjecent間に線を回避する

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>