SVG с шириной и высотой, равной 1px, имеет неправильную позицию пути

Question

Живой пример: https://codepen.io/Ni55aN/pen/jJGVYe

svg {
  overflow: visible !important;
}

.cont {
  position: absolute;
  top: 0;
  left: 0;
}
svg .main-path {
    fill: none;
    stroke-width: 5px;
    stroke: steelblue;
}

.invalid {
  width: 1px;
  height: 1px;
}

.invalid .main-path {
    stroke: red;
}

Равные пути размещены в разных SVG. SVG помещается в контейнер, который имеет абсолютную позицию. Пути должны совпадать визуально, но у нас есть проблемы в SVG с высотой и шириной в 1px - путь смещен (возможно, масштабирован).

Почему это происходит? Это ошибка? И как это можно решить, чтобы сама SVG не занимала какую-либо область

Answer 1

Я не совсем понимаю, почему, но вы можете решить эту проблему, добавив свойство отображения как flex, block или grid:

svg { 
   display: flex;
}

Я разбудил твой кодовый файл здесь