用svg画树状图

好的，下面是一个简单的例子，可以通过 SVG 绘制一个基本的树形图。

<svg width="400" height="400">
  <g>
    <rect x="20" y="20" width="100" height="50" fill="lightblue" stroke="gray" stroke-width="1" rx="10" ry="10" />
    <text x="70" y="45" font-size="14" font-weight="bold" text-anchor="middle">Root</text>
    
    <rect x="120" y="100" width="100" height="50" fill="lightblue" stroke="gray" stroke-width="1" rx="10" ry="10" />
    <text x="170" y="125" font-size="14" font-weight="bold" text-anchor="middle">Node 1</text>
    <line x1="70" y1="45" x2="170" y2="100" stroke="gray" stroke-width="1" />
    
    <rect x="220" y="175" width="100" height="50" fill="lightblue" stroke="gray" stroke-width="1" rx="10" ry="10" />
    <text x="270" y="200" font-size="14" font-weight="bold" text-anchor="middle">Node 2</text>
    <line x1="170" y1="125" x2="270" y2="175" stroke="gray" stroke-width="1" />
    
    <rect x="120" y="250" width="100" height="50" fill="lightblue" stroke="gray" stroke-width="1" rx="10" ry="10" />
    <text x="170" y="275" font-size="14" font-weight="bold" text-anchor="middle">Node 3</text>
    <line x1="170" y1="125" x2="170" y2="250" stroke="gray" stroke-width="1" />
    <line x1="170" y1="250" x2="270" y2="175" stroke="gray" stroke-width="1" />
  </g>
</svg>

在这个例子中，我们使用了 SVG 的基本形状元素，如 `rect` 和 `line`，以及文本元素 `text`，来绘制一个简单的树形图。我们通过设置元素的属性来调整它们的位置，大小和样式。

这只是一个简单的例子，你可以根据你的需求和创意来设计和绘制更复杂的树形图。