reactjs - foreignObject 在 SVG 边框外渲染文本

Question

这是我的完整案例，我需要在中间绘制带有文本的六边形。这在 Chrome Mac 上工作得很好，但在 safari 上，它呈现在边界之外

 <Hexagon style={{ stroke: "white", fill: "#A1A1A1" }} flatTop>
    <foreignObject width="100%" height="100%">
      <Typography
        variant="subtitle1"
        gutterBottom
        className={classes.hexTitleStyle}
      >
        First Line
        <br />
        Second Line
      </Typography>
    </foreignObject>
  </Hexagon>

代码沙盒

它如何在 Chrome Mac 上呈现

它如何在 Safari Mac 上呈现