html - 宽度和高度等于 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;
}

我已经 fork 了你的代码文件 here