如何从svg行中删除模糊

问题描述：

我有两行第一行不平滑（模糊）。虽然线条流畅。我该如何平滑地渲染它。如何从svg行中删除模糊

<svg height="210" width="500"> 
 
    <line x1="0" y1="0" x2="200" y2="10" style="stroke:rgb(255,0,0);stroke-width:2" /> 
 
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> 
 
    Sorry, your browser does not support inline SVG. 
 
</svg>

线被描绘抗锯齿，使它们看起来更平滑。但是考虑到像素的大小，只能做到这么多。特别是像这样的非常浅的角度。采取屏幕截图并放大它，你会发现它正在尽其所能。你看到的是最好的你会得到。恐怕，你将不得不忍受它。 –

答

我不太明白光滑之间的区别和模糊，但你可以使用形状渲染=“crispEdges”获得形状上摆脱抗锯齿。

<svg height="210" width="500" shape-rendering="crispEdges"> 
 
    <line x1="0" y1="0" x2="200" y2="10" style="stroke:rgb(255,0,0);stroke-width:2" /> 
 
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> 
 
    Sorry, your browser does not support inline SVG. 
 
</svg>

靠近顶部的线仍然是ziczac，而其他线不是 – ozil

屏幕由非零维的矩形像素组成。抗锯齿技术是一种使用半透明“填充”像素提供平滑线条外观的技术。没有圣诞老人：https：//en.wikipedia.org/wiki/Spatial_anti-alasing –

如何从svg行中删除模糊

相关推荐