Строки пикселей SVG меняют размер при масштабировании ⇐ Html

[Anonymous]

Я добавляю элемент SVG в свой документ, но когда я масштабирую его, пиксели становятся непоследовательными: некоторые строки становятся меньше или больше других, чтобы соответствовать желаемому пространству. Однако в случае 2 изображение размывается, а пиксели имеют одинаковый размер. Я попытался воспроизвести этот эффект, используя пути в случае 1 вместо прямоугольников, но безуспешно. Если я применяю размытие с помощью CSS, противоречивые пиксели остаются.
Мне нужен вариант 1, чтобы размыть вместо изменения высоты пикселей при масштабировании, или масштабировать таким образом, чтобы не требовалось изменение высоты пикселей.
Я также пытался изменить свойства рендеринга формы и рендеринга изображений в CSS, но это также не дало никаких результатов.
Случай 1:

svg {
width: auto;
height: 60px;
}



const svgText = `













`;
const parser = new DOMParser();
const doc = parser.parseFromString(svgText, "image/svg+xml");
const svgDiv = doc.documentElement;
document.body.appendChild(svgDiv);


Случай 2:






Подробнее здесь: https://stackoverflow.com/questions/798 ... hen-scaled