Javascript SVG剔除文本样式问题：无法解释的裁剪底部

我曾尝试为淘汰文本构建react组件，但遇到了一个无法向自己解释的样式问题

这是我的尝试

const styles={
容器：{
背景尺寸：“封面”，
背景图片：“url(http://brokensquare.com/Code/assets/landscape.jpg)",
填充：“20%20%。”
},
淘汰赛：{
边界半径：200，
溢出：“隐藏”
}
};
常量敲除=（{text，style}）=>{
常数s=样式|{}；
返回(
{text}
);
};
常数App=镭（（）=>(
));

---

正如您所看到的，底部由于某种原因被裁剪，而不是将侧面完全圆化，绘制半个圆。这里有人知道我为什么和如何解决这个问题吗？谢谢。

添加此css，它将起作用

svg { 
   display: block
}

您可以检查下面的代码沙盒

我添加了如下样式

render(
  <div>
    <App />
    <Style
      rules={{
        "*": {
          margin: 0,
          padding: 0,
          boxSizing: "border-box"
        },
        svg: {
          display: "block"
        }
      }}
    />
  </div>,
  document.getElementById("root")

渲染(
,
document.getElementById（“根”）

将

行高：0

添加到包含

svg

@RobertLongson的div中当然！现在完成了。效果非常好！谢谢！

render(
  <div>
    <App />
    <Style
      rules={{
        "*": {
          margin: 0,
          padding: 0,
          boxSizing: "border-box"
        },
        svg: {
          display: "block"
        }
      }}
    />
  </div>,
  document.getElementById("root")