Cannot start with SVG target element

[jkronegg]

Description

I have two intro starting points: one on a <div> and one on a <svg> (both having an id property and containing elements with data-intro properties). I want to start an intro on the <svg>element , but this doesn't work. There is a minimalistic example which reproduce the behavior:

<svg id="mySvg">
    <text data-intro="svg">I'm a SVG</text>
</svg>
<div id="myDiv">
    <span data-intro="div">I'm a DIV</span>
</div>
<script>
    introJs("#mySvg").start();
</script>

Expected Behavior

I expect an Intro Step with text 'svg' to be displayed.

Actual Behavior

Nothing is displayed on screen.

As a workaround, I could do the following to display the 'svg' Intro Step:

introJs("#myDiv").start();
introJs("#mySvg").start();

But it's working only on this toy example, not in real application (potentially due to Promise behavior lasting longer than with the example).

Errors and Screenshots

No error appear on the javascript console.

Example

The issue can be tested on https://jsfiddle.net/jkronegg/v0q539Lk/2/ (with variants: the JSFiddle must be rerun for a clean test setup)

I found the following workaround (programatically create an introJs object by getting all children of the SVG having a data-intro attribute):

introJs().setOptions({steps: Array.from(document.querySelectorAll("#mySvg [data-intro]"))
    .map(elem => ({element: elem, intro:elem.getAttribute("data-intro")})) }).start() 

Environment

Firefox 121.0 IntroJS 7.2.0

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.