使用 Svg 和变换的小间隙（边距）：在某些分辨率上转换答案

【问题标题】：Small gap (margin) using Svg and Transform:Translate on some resolution使用 Svg 和变换的小间隙（边距）：在某些分辨率上转换
【发布时间】：2019-07-12 05:40:27
【问题描述】：

在此示例中，在 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>

【问题讨论】：

您使用的是哪种浏览器？
Chrome v. 69.0.3497.100

标签： html css svg css-transforms

【解决方案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>

【讨论】：

感谢您的反馈，但这并没有改变我的问题。检查检查器模式下的响应选项，如果您移动宽度，间隙仍然会出现在特定分辨率上。