Open
Description
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
- Launch FireFox desktop browser.
- Create a
flowchart
diagram - Add node image-shape
- Provide a link to the svg image
- Set
constraint: on
- 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
Activity