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>

尽管有crispEdgeEdges，SVG中的行大小也不相同

1 个答案: