Почему моя линия SVG размыта или 2px по высоте, когда я указал 1px?

Я создаю строку с SVG, и она появляется размытой на моей веб-странице. Чтобы быть более ясным, он кажется больше, чем ширина штриха 1px. Почему это происходит и есть ли способ исправить это в СВГ?

вот код. Когда я запускаю этот код сам по себе он не размыто. Когда он находится на моей веб-странице, строка кажется примерно 2px по высоте, а не 1. 

#HorizontalLine1178  {
	stroke:rgb(154,154,154);
	stroke-width:1;
}
<svg style="width:100%;">
    <line id="HorizontalLine1178" y2="97" y1="97" x2="100%" x1="62" >
</svg>
6
svg

1 ответов

потому что, когда его координаты Y лежат на всем пикселе,1px ход вокруг него, и таким образом "анталияград". В этом случае используйте координаты половины пикселя или примените shape-rendering="crispEdges" это сделает пиксель округления для вас, но будет производить острые края даже на закругленных объектов:

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