如何编写HTML代码，参照示例图片用SVG创建网站地图？

你当前的代码已经搭建了网站地图的基础框架，但箭头连接存在问题——主节点MY PAGE只关联了两个子节点，缺少指向MY PORTFOLIO的箭头。下面是修正并优化后的代码：

<svg width="400" height="200">
  <!-- 定义箭头标记 -->
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="black" />
    </marker>
  </defs>

  <!-- 主节点：MY PAGE -->
  <rect x="0" y="0" width="100" height="100" style="fill:lightblue;stroke-width:2;stroke:black" />
  <text x="50" y="60" text-anchor="middle" font-size="16px">MY PAGE</text>

  <!-- 主节点到分支点的连线 -->
  <line x1="50" y1="100" x2="50" y2="130" style="stroke:black;stroke-width:2" />

  <!-- 分支点到三个子节点的连线 -->
  <line x1="50" y1="130" x2="50" y2="150" style="stroke:black;stroke-width:2;marker-end:url(#arrowhead)" />
  <line x1="50" y1="130" x2="150" y2="150" style="stroke:black;stroke-width:2;marker-end:url(#arrowhead)" />
  <line x1="50" y1="130" x2="250" y2="150" style="stroke:black;stroke-width:2;marker-end:url(#arrowhead)" />

  <!-- 子节点：ABOUT ME -->
  <rect x="0" y="150" width="100" height="40" style="fill:lightblue;stroke-width:2;stroke:black" />
  <text x="50" y="175" text-anchor="middle" font-size="14px">ABOUT ME</text>

  <!-- 子节点：CONTACT ME -->
  <rect x="100" y="150" width="100" height="40" style="fill:lightblue;stroke-width:2;stroke:black" />
  <text x="150" y="175" text-anchor="middle" font-size="14px">CONTACT ME</text>

  <!-- 子节点：MY PORTFOLIO -->
  <rect x="200" y="150" width="100" height="40" style="fill:lightblue;stroke-width:2;stroke:black" />
  <text x="250" y="175" text-anchor="middle" font-size="14px">MY PORTFOLIO</text>
</svg>

关键调整说明： #

• 补全了指向MY PORTFOLIO的箭头，让主节点和所有子节点正确关联
• 调整了子节点的高度和位置，让布局更紧凑合理
• 给箭头标记添加了fill="black"，确保箭头显示为黑色
• 优化了代码结构，按节点类型分组，更易维护
• 统一了文本的字体大小，提升视觉一致性

内容的提问来源于stack exchange，提问作者Jesse