为什么我的绝对位置的 SVG 不完全位于边缘？

Question

每当我尝试使用 position: absolute; 定位缩放的 SVG 并使用 0 作为定位参数（即top:0;）时，svg 似乎无法无缝连接。

尤其是在缩放或创建响应式布局时，似乎会发生这种情况。

考虑以下示例：

带有 SVG 圆角的项目：

<div class="item">
        <svg class="corner top-left" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">

          <path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
          <line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
        </svg>
        <svg class="corner top-right" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">

          <path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
          <line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
        </svg>
        <svg class="corner bottom-left" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
           viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">

        <path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
        <line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
        </svg>
        <svg class="corner bottom-right" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
           viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">

        <path class="st0" d="M10,0H0v10c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
        <line class="st1" x1="0" y1="0" x2="9.9" y2="9.9"/>
        </svg>
</div>

角落用position: absolute;定位并在css中旋转

.corner {
  position: absolute;
  height: 20px;
}
.top-left {
  left: 0;
  top: 0;
}
.top-right {
  top: 0;
  right: 0;
  transform: rotate(90deg);
}
.bottom-left {
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
}
.bottom-right {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}

现在，根据您的屏幕分辨率，您会发现边角无法完全贴合边缘。此外，当放大/缩小网站时，oyu 会看到 SVG 和元素边缘之间的间隙。

一个肮脏的修复方法是仅将元素在其定位的方向上偏移负 1 个像素。但是，间隙似乎小于 1 个像素，因此在偏移 1 个像素时破坏了元素的设计。此外，间隙并非一直出现，仅在某些像素断点处出现。

有谁知道如何解决这个问题？

FIDDLE

为了澄清，我想防止这些行发生：

Answer 1

我不确定这个问题是否有特别优雅的解决方案。它主要影响 Firefox，因为我相信 Chrome/Webkit 倾向于将元素捕捉到像素边界，而 Firefox 则不会。

一种解决方案是更改您的路径，使它们稍微画在 SVG 之外，然后将 <svg> 设置为 overflow="visible"。

<svg class="corner top-left" ...snip... viewBox="0 0 10 10" overflow="visible">
    <path class="st0" d="M10,0 V-2H-2V10H0c0-2.7-0.1-6.5,1.7-8.3C3.5-0.1,7.2,0,10,0z"/>
 </svg>

在这里，对于这个左上角的 SVG，我在左上角创建了一个由两个单元组成的“门廊”。那么如果overflow设置为visible，路径就会过度绘制抗锯齿/圆角引起的小红线。

Here's a demo fiddle with (only) the top left SVGs modified.