尽管有crispEdges，SVG中的行大小却不一样

Question

我有一个SVG映像，正在创建和通过编程增强。在创建它之后，它将被绘制在画布上。但是，尽管stroke-width的值相同，属性shape-rendering设置为crispEdges，但行的宽度似乎并不相同。

坐标是用JavaScript计算的(因此是奇怪的数字)。然而，有些线条似乎是其他线条的两倍(见下面的例子)。我不明白为什么会发生这种事，也不明白我怎么能解决这个问题。

我最好的猜测是，计算不够精确，而且角度实际上不是一个完美的45°，从而导致了一条更厚的线。但是当我用手计算坡度时，它是45°。

理论上，将shape-rendering设置为auto是可行的，但在这种情况下，线条必须不是光滑的。

​

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
  <rect id="background" x="0" y="0" width="3201" height="1677" fill="rgb(255,255,255)" stroke-width="0"/>
  <line x1="0.5" y1="71.5" x2="71.2106781186546" y2="0.7893218813452"/>
  <line x1="71.2106781186546" y1="0.7893218813452" x2="141.9213562373093" y2="71.5"/>
  <line x1="141.9213562373093" y1="71.5" x2="212.632034355964" y2="0.7893218813452"/>
  <line x1="212.632034355964" y1="0.7893218813452" x2="283.3427124746186" y2="71.5"/>
</svg>

​

Answer 1

crispEdges属性的目的是强调图片边缘之间的对比度，而不是确保笔画具有相同的宽度。

您可能希望使用geometricPrecision代替。但是，如果由于某种原因使用清晰的边缘很重要，请尝试使用相同的渐变和它们的起始点/结束点对齐像素网格(理想情况下，由0.5像素抵消)。

下面是您的SVG，并做了一些小修改，以确保笔画宽度看起来一致：

​

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke="rgb(0,0,0)" stroke-width="1">
  <rect id="background" x="0" y="0" width="300" height="80" fill="rgb(255,255,255)" stroke-width="0"/>
  <line x1="0.5" y1="71.5" x2="71.5" y2="0.5"/>
  <line x1="71.5" y1="0.5" x2="142.5" y2="71.5"/>
  <line x1="142.5" y1="71.5" x2="213.5" y2="0.5"/>
  <line x1="213.5" y1="0.5" x2="284.5" y2="71.5"/>
</svg>

​