当我指定 1px 时，为什么我的 SVG 线条模糊或高度为 2px? [英] Why is my SVG line blurry or 2px in height when I specified 1px?

问题描述

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

I'm creating a line with SVG and it is appearing blurry in my web page. To be more clear, it appears larger than the stroke width of 1px. Why is this happening and is there a way to fix it in SVG?

这是代码.当我自己运行这段代码时，它并不模糊.当它在我的网页中时，该行的高度似乎约为 2px 而不是 1.

Here is the code. When I run this code by itself it is not blurry. When it's in my web page the line appears to be about 2px in height rather than 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 笔画在它周围，因此抗锯齿"(参考 Paul LeBeau 的优秀插图).在这种情况下使用半像素坐标，或应用 shape-rendering="crispEdges" 将为您进行像素舍入，但即使在圆形对象上也会产生锐利的边缘:

Because when its Y coordinates lies on whole pixel, the 1px stroke is around it and thus "antialiased" (refer to Paul LeBeau's excellent illustration). Use half pixel coordinates in this case, or apply shape-rendering="crispEdges" that will do the pixel rounding for you, but will produce sharp edges even on rounded objects:

<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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！