我有一个正在通过程序创建和增强的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>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>