Как предотвратить непостоянную толщину и пробелы в линиях SVG? ⇐ CSS

[Anonymous]

Мой вариант использования, возможно, немного уникален, но я создаю квадратную сетку динамического размера, используя элементы DOM, заключенные во флексбокс. Каждый элемент DOM имеет фоновое изображение SVG и высоту/ширину, равную Calc(100vmin / ). Элементы SVG просты:

Код: Выделить всё

Однако я заметил, что некоторые строки кажутся темнее других, а между некоторыми строками SVG есть пробелы. (См. рисунок ниже) Я предполагаю, что это связано с округлением пикселей, потому что, когда я изменяю размер браузера, зазоры и толщина прыгают.

Я пытался скруглить пиксели. из Calc, но я использую стилизованные компоненты, поэтому я не могу использовать функции SASS/LESS, такие как Floor/Ceil. Я также заметил, что увеличение ширины обводки решает проблему, но я бы предпочел, чтобы линии были тонкими.

Есть ли другие способы сделать линии последовательными?

Есть ли другие способы сделать линии последовательными?

Есть ли другие способы сделать линии последовательными? p>




Подробнее здесь: https://stackoverflow.com/questions/440 ... -svg-lines