Небольшой пробел (маржа) с помощью Svg и Transform: переведите на какое-то разрешение

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>