Question

在此示例中，svg下（和旁边）存在一个小间隙，该间隙仅在某些分辨率下显示，例如宽度为556px，948px或1318px（尝试拉伸窗口以查看）

只有当我使用属性transform：Translate时，它才会这样做！我不知道它是从哪里来的...

body{
  background-color:blue;
  margin:0;
}
.two{
  height:150px;
  width:100%;
  background-color:red;
}
svg{
  transform:translateY(-100%);
}

<div id="one" class="two"></div>
<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 2000 102.3"><title>h-00c</title><path d="M1000,93.12c24,0,516.62,7.94,1000-92.43V102.3H0V.69C483.38,101.06,976,93.12,1000,93.12Z" style="fill:#fff"></path></svg>

Answer 1

您所说的差距实际上是SVG。我已经将其颜色从白色更改为黄色。除此之外，我没有看到任何差距。

body{
  background-color:blue;
  margin:0;
}
.two{
  height:150px;
  width:100%;
  background-color:red;
}
svg{
  transform:translateY(-100%);
}

<div id="one" class="two"></div>
<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 2000 102.3"><title>h-00c</title><path d="M1000,93.12c24,0,516.62,7.94,1000-92.43V102.3H0V.69C483.38,101.06,976,93.12,1000,93.12Z" style="fill:#ff0"></path></svg>

使用Svg和Transform的小间隙（边距）：以某种分辨率翻译

1 个答案: