Error in flowchart image-shape when using svg on FireFox

[Limbend]

Description

Detected when using FireFox:
If you use an svg file as an image and activate the constraint option, the block scheme is not rendered correctly.
Received errors:

Unexpected NaN value when analyzing the width attribute. CHyiqE_3.js:96:19013
Unexpected NaN value when analyzing the height attribute. CHyiqE_3.js:96:19013
Unexpected translate(NaN,NaN) value when analyzing transform attribute. CHyiqE_3.js:96:19013
Unexpected translate(-52.19999694824219,NaN) value when analyzing the transform attribute. CHyiqE_3.js:96:19013
Unexpected translate(-52.19999694824219,NaN) value when analyzing the transform attribute. C9j3OrOs.js:16:39462
Unexpected value of translate(NaN,NaN) when analyzing the transform attribute. C9j3OrOs.js:16:39462
Unexpected value of NaN when analyzing height attribute. C9j3OrOs.js:16:39462
Unexpected NaN value when analyzing width attribute. C9j3OrOs.js:16:39462

If you use Google Chrome, there is no problem.

Steps to reproduce

1. Launch FireFox desktop browser.
2. Create a flowchart diagram
3. Add node image-shape
4. Provide a link to the svg image
5. Set constraint: on
6. Get an error in the browser logs and a corrupted image

Or just use the ready-made code at mermaid.live

Screenshots

Code Sample

TD flowchart
    ico@{img: “https://mermaid.js.org/favicon.ico”, h: 80, constraint: on, label: “ico/png/jpg”}
    constraintoff@{img: “https://mermaid.js.org/mermaid-logo.svg”, h: 80, constraint: off, label: “constraint: off”}
    constraintinton@{img: “https://mermaid.js.org/mermaid-logo.svg”, h: 80, constraint: on, label: “constraint: on”}
    Mermaid --> Firefox
    Firefox --> flowchartimg(flowchart img)
    flowchartimg --> ico
    ico ---> OK
    flowchartimg --> svg
    svg --> constraintoff
    svg --> constraintoff
    constraintoff --> itlooksbad.
    constraintinton --> ERROR

Setup

• Mermaid version: 11.4.1
• Browser and Version:
  • Firefox: 136.0

Suggested Solutions

No response

Additional Context

No response

[nour0205]

Hello @Limbend

I can confirm that this issue persists in Firefox when testing on the development page with the provided code while using Edge, the diagram renders correctly without any errors.

Additional Findings

In Firefox, the following errors appear in the console when executing the provided code

The same code in Edge runs without errors, rendering the diagram correctly.
This suggests a Firefox-specific issue with how SVG images are processed when constraint: on is enabled.

Environment Details:

Mermaid Version: 11.4.0
Tested Browsers:
Edge 132.0 → No issues
Firefox 135.0 → Errors encountered