为什么我的绝对位置的 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);
}

现在，根据您的屏幕分辨率，您会发现边角不会完全贴合边缘。此外，当缩放 in/out 到网站时，您会看到 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，我在左上方创建了两个单元 "porch"。那么如果设置overflow为visible，路径就会透支anti-aliasing/rounding.

造成的小红线

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

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

Why is my SVG with position absolute not exactly at the edge?

css

svg

responsive