uniapp 用svg写一个思维导图，可展开合起，缩放平移

Uniapp可以通过使用SVG（Scalable Vector Graphics）来实现思维导图。SVG是一种基于XML的矢量图形格式，可以实现良好的缩放和平移效果。

以下是一个简单的思维导图示例代码：

<template>
  <svg width="100%" height="100%" @click="handleClick">
    <g>
      <rect x="50" y="50" width="150" height="50" fill="#fff" stroke="#000" stroke-width="2" rx="10" ry="10" />
      <text x="125" y="80" font-size="20" text-anchor="middle">Node 1</text>
      <line x1="125" y1="100" x2="125" y2="150" stroke="#000" stroke-width="2" />
      <rect x="50" y="150" width="150" height="50" fill="#fff" stroke="#000" stroke-width="2" rx="10" ry="10" />
      <text x="125" y="180" font-size="20" text-anchor="middle">Node 2</text>
    </g>
  </svg>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      // 处理点击事件
    }
  }
}
</script>

<style scoped>
svg {
  overflow: hidden;
  user-select: none;
}
</style>

在这个示例中，我们使用`<svg>`元素来创建一个SVG容器，通过`<g>`元素创建一个节点组，使用`<rect>`元素创建矩形节点，使用`<text>`元素创建节点文本，使用`<line>`元素创建连接线。通过`@click`事件处理函数来处理节点的点击事件。

要实现展开合起、缩放和平移功能，可以使用JavaScript来操作SVG元素，例如：

- 使用`transform`属性来实现缩放和平移效果；
- 使用`display`属性来实现节点的展开和合起效果。

具体实现方法可以根据需求进行调整。