Почему при dispalay:grid ломается обводка блока через svg?

Question

[nikfcsm]

https://codepen.io/nikfcsm/pen/bGJJEee

Имеется вот такая обводка блока


Блок находится в grid сетке, зачем пишу про grid, расскажу далее.
Если мы начинаем попиксельно уменьшать разрешение экрана, то каждый пиксель обводка начинает менять свой вид



НО, если я убираю display:grid, то такая проблема перестает иметь место, и кстати, в firefox все окей, в хроме, эйдже одинаково плохая картина.

Вот тут попытался воссоздать проблему, и да, она там есть.
https://codepen.io/nikfcsm/pen/bGJJEee
Кто подскажет в чем заключается проблема и как ее решить?

Comments

[xdevelx]

Grid здесь имеет опосредованное влияние — просто ширина блока в вашем примере уменьшается на 0.5px. И в свг соответственно масштабируется обводка. При адаптиве это будет происходить неизбежно. А если в блок добавить больше контента и он по высоте станет больше, опять масштабирование изменит пропорции обводки.

[nikfcsm]

xdevelx, А как можно решить данную проблему? пока что даже идей нет...
А так да, если фиксированный w и h задавать, то все окей

[xdevelx]

nikfcsm, В подобных случаях для проблем с масштабированием свг можно для svg задать preserveAspectRatio="none", а для отдельных элементов с обводкой задавать vector-effect="non-scaling-stroke".
Либо на css попытаться повторить такую же обводку. Непросто будет, но маской с коническим градиентом можно что то похожее воспроизвести.

Answer 1

[Антон Антон]

может быть это поможет: https://developer.mozilla.org/en-US/docs/Web/SVG/R...