Как обрабатывать привязку пикселов SVG

Question

Я пытаюсь отобразить две строки SVG, используя элемент path. Первая линия имеет ширину 1px и острую Вторая линия имеет ширину 2px и размыта
Ширина хода одинакова для обоих. Как исправить эту

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<path style="stroke-width:1;stroke:red;opacity:1;" d="M 300.5 250 L 300.5 300 "></path> 
<path style=" stroke-width:1;stroke:red;opacity:1;" d="M 350 250 L 350 300 "></path> 
</svg> 

Answer 1

В основном это 0,5 смещение, что делает линию резким. By default, integer coordinates map to the intersections of the pixel squares. So a width-1 horizontal/vertical line is centered on the boundary between pixel rows and extends half way into the pixels on either side.

Таким образом, чтобы исправить вторую линию, добавьте 0,5 к координатам или используйте стиль shape-rendering: crispEdges. Обратите внимание, что crispEdges предотвращает сглаживание, поэтому горизонтальные/вертикальные линии четкие, но угловые линии выглядят блочными.

Кроме того, stroke-width = 1 недействителен синтаксис CSS. Первый пример ширины штриха: 1 имеет правильное значение.