当我指定1px时,为什么我的SVG线条模糊或高度为2px？

我正在创建一个SVG线,它在我的网页中显得模糊.更清楚的是,它看起来比1px的笔划宽度大.为什么会发生这种情况,有没有办法在SVG中修复它？

这是代码.当我自己运行此代码时,它并不模糊.当它在我的网页中时,该线看起来大约是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>

解决方法

因为当它的Y坐标位于整个像素上时,1px笔划在它周围,因此“抗锯齿”.在这种情况下使用半像素坐标,或者应用 shape-rendering="crispEdges"将为您执行像素舍入,但即使在圆形对象上也会产生锐边：

rect,circle,line  {
	stroke: rgb(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>

原文地址：https://www.jb51.cc/css/214852.html