分离外壳与内部零件、实现点击展开的技巧

两个分组，两种职责

把图拆成意图上的恰好两层：壳体——赋予物体可辨认外形的外壳；以及内部零件——读者本应去探索的部件。其余一切都从属于这一拆分。

在 SVG 里，每一层就是一个分组。内部零件分组按文档顺序在前，壳体分组在后、在最上层，带有低不透明度，并禁用指针事件。这样壳体既框住了物体，又不会挡掉下方零件上的任何一次点击。

一个 id，一个零件，处处一致

每个可交互零件都带一个稳定的 data-id。这个值就是图形与页面其它部分之间的契约。你的部件清单由同一批 id 生成，所以某一行和它的形状共用一个名字。清单行被悬停时，代码找到对应元素并高亮它；某个形状被悬停时，则反过来。

<g class="part" data-id="part-valve"> … </g>
<g class="part" data-id="part-piston"> … </g>
<g class="shell-layer" data-id="part-shell"> … </g>

就交互而言，把壳体排除在部件数据之外。它是背景，不是部件，所以它不该出现在清单里，也不该像部件那样被高亮。

让揭示可逆且安静

最安全的交互是"高亮"：某个零件变色、获得一层柔和描边，同时图中其余部分略微安静下来。没有东西移动，读者正在看的东西都不会消失，指针移开就恢复原状。

• 悬停高亮，点击定位。悬停是宽容的；把点击留给"把零件带进视野"。
• 绝不隐藏读者可能仍需要的零件。用强调去揭示，而不是用擦除。
• 让交互镜像。零件与清单行应当以完全相同的方式高亮，且双向成立。

让揭示保持无障碍

因为讲解内容本就写在页面里，揭示只是增强，不是必需。确保部件清单是真正的文本，让可交互元素具有可聚焦状态，并让高亮也能在键盘聚焦时出现。从不点击——或无法点击——的读者，依然能从标注、清单与正文里获得完整的故事。