宽度和高度等于1px的Svg具有错误的路径位置

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;
}

我已经分叉你的代码文件here