foreignObject在SVG边界外渲染文本

Question

这是我的完整情况，我需要在中间绘制带有文本的Hexagon。 这项功能在Chrome Mac上正常运行，但在野生动物园中，则在边框外呈现

 <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>

CodeSandBox

它如何在Chrome Mac上呈现

它如何在Safari Mac上呈现