SVG是HTML5中绘制拓扑图最灵活的方式，支持精确节点定位、动态连线、交互响应和缩放适配；节点用<circle>或<rect>定位，连线用<line>或<path>实现，通过JS动态更新与交互，并注重样式语义和可访问性。
SVG 是 HTML5 中绘制拓扑关系图最灵活、可控性最强的方式之一。它不依赖第三方库就能实现精确的节点定位、动态连线、交互响应和缩放适配，特别适合网络拓扑、系统架构图、知识图谱等场景。
节点布局：用 <circle> 或 <rect> 定位关键要素
每个节点本质是 SVG 中的一个图形元素，位置由 cx/cy（圆形）或 x/y（矩形）决定。建议统一用相对坐标系管理，避免硬编码像素值：
- 预先定义画布尺寸（如
viewBox="0 0 800 600"），让图表自动适配容器 - 节点坐标可基于数据计算：例如按层级水平分布（树状拓扑）或用力导向算法（D3.js 可导出坐标，纯 SVG 也可手动模拟）
- 为节点添加
id和data-type属性，便于后续 JS 绑定事件或样式控制
连线绘制：用 <line> 或 <path> 表达连接关系
简单直连用 <line> 最轻量；带箭头、曲线、折线则推荐 <path>：
<line x1="100" y1="200" x2="300" y2="200" stroke="#666" stroke-width="2"/>- 箭头需配合
<defs>定义标记（marker），再通过marker-end="url(#arrow)"应用 - 若节点移动，连线需同步更新——监听节点
transform或直接重设x1/y1/x2/y2属性（推荐用 JS 持有坐标引用）
动态更新与交互：用原生 DOM 操作驱动变化
SVG 元素是真实 DOM 节点，可直接用 JavaScript 操作：
立即学习“前端免费学习笔记（深入）”；
- 点击节点高亮自身及相连边：
node.addEventListener('click', () => { line.setAttribute('stroke', 'red'); }) - 拖拽节点时实时重绘连线：监听
mousedown → mousemove → mouseup，动态修改<line>的端点坐标 - 缩放/平移整个拓扑图：对
<g>容器应用transform="scale(1.2) translate(50, 30)"，所有子元素自动跟随
样式与可访问性：别忽略视觉层次与语义表达
拓扑图不仅是“能看”，还要“易读”“可访问”：
- 用
class控制不同节点类型（如服务器、交换机、终端），配合 CSS 设置 fill/stroke - 为重要节点添加
<title>子元素，鼠标悬停显示说明文字，也利于屏幕阅读器识别 - 连线粗细、虚实、颜色应反映关系属性（如主链路加粗实线，备用链路细虚线）
不复杂但容易忽略：保持坐标逻辑清晰、分离数据与视图、优先使用 viewBox 实现响应式，拓扑图就能既稳定又可维护。
