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

【问题标题】：Svg with width and height equal to 1px has a wrong path position宽度和高度等于 1px 的 Svg 路径位置错误
【发布时间】：2019-08-02 07:20:47
【问题描述】：

现场示例：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 放置在具有绝对位置的容器中。路径应该在视觉上匹配，但我们在 1px 高度和宽度的 SVG 中存在问题 - 路径被移动（可能缩放）。

为什么会这样？这是一个错误吗？以及如何解决这个问题，使 SVG 本身不占用任何区域

【问题讨论】：

有趣。我发现一些事情似乎只有height 会影响这一点，如果你将line-height: 0 添加到.cont 它确实会更接近......但仍然关闭
@zgood with line-height: 0;它有一个小的不匹配
如果您将outline:1px solid 添加到您的 svg 元素中，您将能够看到 2 个 svg 元素未对齐。正如@SusanSanz 提到的那样，添加display:block 可以解决问题。

标签： html css svg webkit

【解决方案1】：

我不明白为什么，但你可以通过添加一个显示属性来解决它flex、block 或grid：

svg { 
   display: flex;
}

我已经 fork 你的代码文件here

【讨论】：

position: absolute 也修复了，但是有点奇怪
是的。想法......可能是svgs上的一些隐藏填充，以防止1px的细路径对图像产生莫尔效应......？
浏览器中不同的缩放存在问题