[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:line-following-html-div-overlay":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 图边上的沿线移动 HTML 覆盖层\n\n## 这个示例实现了什么\n这个示例在深色、霓虹风格的画布上渲染了一个紧凑的居中布局图，并默认保持一条边处于选中状态。被选中的边会得到更明亮的动画高亮、两端的自定义箭头标记，以及两个渲染在画布上方的 HTML 装饰元素：一个可以沿着边移动或停在固定百分比位置的主 DIV，以及一个持续沿同一路径运动的较小粒子。\n\n用户可以点击另一条线来重新指定覆盖层目标，拖动节点并观察覆盖层如何与新的几何形状重新对齐，切换所有线所使用的形状，并打开共享设置面板来调整滚轮或拖拽行为以及导出图像。这个示例的核心并不是自定义 SVG 边渲染，而是如何把 relation-graph 内置的线条几何信息复用为普通 DOM 内容可用的 CSS motion-path 数据。\n\n## 数据是如何组织的\n图数据在 `initializeGraph()` 中以内联方式组装为一个静态 `RGJsonData` 对象，其中包含 `rootId`、`nodes` 数组和 `lines` 数组。每条线都有稳定的 `id`、`from`、`to` 和 label，并且在调用 `setJso",true,500,1782615380119]