Линии в 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>