Question

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

这是代码。当我自己运行此代码时，它并不模糊。当它出现在我的网页上时，该线看起来大约是2px而不是1.

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

因为当它的Y坐标位于整个像素上时，1px笔划就在它周围，因而是“抗锯齿”（参考Paul LeBeau的excellent illustration）。在这种情况下使用半像素坐标，或者应用shape-rendering="crispEdges"将为您进行像素舍入，但即使在圆形对象上也会产生锐边：

<svg style="width:100%; background-color: white" stroke="black" fill="white" stroke-width="1">
	<line y2="10.0" y1="10.0" x2="90%" x1="10">
		<title>.0</title>
	</line>
	<line y2="15.5" y1="15.5" x2="90%" x1="10">
		<title>.5</title>
	</line>
	<line y2="20.0" y1="20.0" x2="90%" x1="10" shape-rendering="crispEdges">
		<title>.0 + crispEdges</title>
	</line>

	<circle cy="50" cx="20" r="10">
		<title>.0</title>
	</circle>
	<circle cy="49.5" cx="44.5" r="10">
		<title>.5</title>
	</circle>
	<circle cy="50" cx="70" r="10" shape-rendering="crispEdges">
		<title>.0 + crispEdges</title>
	</circle>

	<rect x="90" y="40" width="20" height="20">
		<title>.0</title>
	</rect>
	<rect x="120" y="40" width="20" height="20" shape-rendering="crispEdges">
		<title>.0 + crispEdges</title>
	</rect>
	<rect x="149.5" y="39.5" width="20" height="20">
		<title>.5</title>
	</rect>

	<rect x="190" y="40" width="20" height="20" stroke="none" fill="black">
		<title>.0 + fill, no stroke</title>
	</rect>
	<rect x="219.5" y="39.5" width="20" height="20" stroke="none" fill="black">
		<title>.5 + fill, no stroke</title>
	</rect>
</svg>

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

1 个答案: