如何从 svg 行中删除模糊

Question

我有两行 第一行不平滑（模糊）。虽然线条很流畅。如何使其平滑。

<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>

Answer 1

我不太明白你对平滑和模糊的区别，但你可以使用shape-rendering="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>