invoking a view-timeline declared in an inline SVG will throw an error

[rockinghelvetica]

I had attached my view timeline to an SVG element, which worked well enough in the native case. But under the polyfill in older Safari or Firefox, it was producing a non-finite error. After debugging other possibilities, I moved my DOM elements around and managed to trigger a more nuanced error:

The polyfill throws TypeError: Cannot read property 'scrollHeight' of null when view-timeline-name is set on SVG elements, as it attempts to access document.body.scrollHeight which is unavailable in the SVG context.

One curiosity might be if this is also true for web components? The SVG scope incompatibility would be a useful disclosure, if not something to fix.

This will throw an error:

/* an SVG element, timeline provider */
#dashed-segment5-wrapper {
      view-timeline-name: --dashed-segment5;
      view-timeline-axis: block;
 }

/* animated SVG path, timeline consumer */
#dashed-mask5 use {
      animation: drawLine linear forwards;
      animation-timeline: --dashed-segment5;
      animation-range: cover 30% contain 50vh;
    }