A shape inside an SVG

A hole cut around a shape in a scaled SVG diagram, and the shape itself takes the click that moves the step.

The story

const story = {
  id: 'svg-target',
  steps: [
    {
      // A selector into the SVG. The shape is drawn through a viewBox, so
      // the hole is only right because the box is measured, not read off
      // the attributes.
      id: 'read',
      target: '[data-node="cart"]',
      message: 'The order starts in the cart. This box is an SVG rect.',
    },
    {
      // The function form: an SVGRectElement, which the type of a target
      // has to allow a host to hand back.
      id: 'choose',
      target: {
        elements: () => document.querySelector('[data-node="payment"]'),
        interactive: true,
      },
      awaits: 'diagram-node-chosen',
      message: 'Click the Payment node — the shape under the hole is the real one.',
    },
  ],
} satisfies LekoStory

What the page reports

const report = () => leko.reached('diagram-node-chosen')
payment.addEventListener('click', report)
payment.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') report()
})