为什么我的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，我在左边和右边创建了一个两个单元的“门廊”。然后，如果溢出设置为可见，则路径将覆盖由抗锯齿/舍入引起的小红线。

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