Two groups, two jobs

Split the artwork into exactly two layers of intent: the shell — the outside casing that gives the object its recognisable shape — and the internals — the parts the reader is meant to explore. Everything else is subordinate to that split.

In SVG, each layer is a group. The internals group comes first in document order, and the shell group comes last, on top, with a low opacity and pointer events switched off. That way the shell frames the object without blocking a single click on the parts beneath it.

Shell and internals pull apart into their own layers Shell layer drawn last · low opacity reveal part A part B part C · each has one data-id The internals group stays underneath; the shell never intercepts its clicks.
Figure 1 — Same object, two groups. The shell sits on top but stays out of the way so the internals remain fully interactive.

One id, one part, everywhere

Every interactive part carries a stable data-id. That value is the contract between the drawing and everything else on the page. Your parts list is built from the same ids, so a row and its shape share one name. When the list row is hovered, the code finds the matching element and highlights it; when a shape is hovered, the reverse happens.

<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>

Keep the shell out of the parts data as far as interaction is concerned. It is context, not a component, so it should not appear in the list and should not highlight as if it were one.

Make the reveal reversible and calm

The safest interaction is a highlight: a part changes colour and gains a soft outline while the rest of the figure quiets down slightly. Nothing moves, nothing the reader was looking at disappears, and moving the pointer away restores the original state.

  • Hover to highlight, click to locate. Hover is forgiving; reserve click for bringing a part into view.
  • Never hide a part the reader may still need. Reveal by emphasis, not by erasing.
  • Mirror the interaction. Part and list row should highlight identically, in both directions.

Keep the reveal accessible

Because the explanation is already written in the page, the reveal is an enhancement, not a requirement. Ensure the parts list is real text, give interactive elements focusable states, and let the highlight also show on keyboard focus. A reader who never clicks — or who cannot — still gets the whole story from the labels, the list and the prose.

Bottom line: two groups, one id per part, shell drawn last but inert, and a highlight that is reversible. That is the entire recipe behind a reliable click-to-reveal diagram.