Skip to content

Error in flowchart image-shape when using svg on FireFox #6362

Open
@Limbend

Description

@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

Image
Image
Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: TriageNeeds to be verified, categorized, etcType: Bug / ErrorSomething isn't working or is incorrect

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions