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

Question

Я пытаюсь сделать две строки SVG, используя элемент пути. Первая строка имеет ширину 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, что делает линию резкой. По умолчанию целочисленные координаты отображаются на пересечения квадратов пикселей. Таким образом, горизонтальная / вертикальная линия шириной 1 центрируется на границе между рядами пикселей и продолжается на полпути в пиксели с обеих сторон.

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

Также штрих-ширина =1 не является допустимым синтаксисом CSS. Первый пример штрих-ширины: 1 имеет право.

Answer 2

Просто попробуйте переместить элемент SVG.

svg {
  padding: .5px;
}