SVG ForeignObject内3×3 CSS网格格式化问题求助

尝试在SVG的foreignObject元素中嵌入HTML实现3×3 CSS网格，希望达到以下效果：

• 参照网格示例（移除灰色框，改为绿色背景）
• 中央单元格显示大字号的"MY-WEB-SERVER"文本
• 当前网格布局杂乱，无法形成规整的3×3结构

以下是修正后的代码，解决布局混乱问题并实现需求：

.grid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 15% 70% 15%;
  grid-template-rows: 1fr 1fr 1fr; /* 三行等高 */
  gap: 0;
  justify-items: center;
  align-items: center; /* 让内容垂直居中 */
}

.box {
  background-color: #4CAF50; /* 绿色背景 */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; /* 确保单元格内内容垂直水平居中 */
  color: #fff; /* 可选：白色文字增强对比度 */
}

.label {
  font-family: Arial;
  font-size: 28px;
  font-weight: bold; /* 可选：加粗突出中央文本 */
}

<foreignObject width="90%" height="90%">
  <div class="grid" xmlns="http://www.w3.org/1999/xhtml">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">
      <svg xmlns="http://www.w3.org/2000/svg" fill="goldenrod" height="24" viewBox="0 0 24 24" width="48">
        <path d="M0 0h24v24H0V0z" fill="none" />
        <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
      </svg>
    </div>

    <div class="box">4</div>
    <div class="box label">MY-WEB-SERVER</div>
    <div class="box">6</div>

    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box"><span style="font-family: Arial">RUNNING</span></div>
  </div>
</foreignObject>

关键修改说明 #

1. 网格容器尺寸：给.grid添加width: 100%; height: 100%;，确保网格填满foreignObject的可用空间，避免因内容收缩导致布局错乱。
2. 行等高设置：新增grid-template-rows: 1fr 1fr 1fr;，让三行高度均分，形成规整的3×3网格结构。
3. 单元格样式：.box设置绿色背景，同时用flex布局确保内部内容（包括文本和SVG图标）在单元格内垂直水平居中，并且占满整个单元格空间。
4. 内容居中优化：网格容器添加align-items: center;，配合单元格的flex布局，彻底解决内容对齐问题。
5. 中央文本突出：保留.label的大字号设置，可选添加加粗增强视觉焦点。

内容的提问来源于stack exchange，提问作者bob.mazzo