Invalid value for <svg> attribute viewBox="0 0 -Infinity -Infinity"
See original GitHub issueUsing the Jekyll plugin and getting the above error. Also get the error when calling mermaid.init();
The svg looks like:
<svg id="mermaidChart1" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 -Infinity -Infinity" style="max-width:-Infinitypx;"><g><g class="output"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"></g></g></g></svg>
for the example:
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
Issue Analytics
- State:
- Created 8 years ago
- Reactions:5
- Comments:16 (1 by maintainers)
Top Results From Across the Web
Invalid value for <svg> attribute viewBox="0 0 -Infinity - GitHub
init() in a div with class "mermaid" and this div is empty, without the graph definition. I tested it in all versions above...
Read more >Error: Invalid value for <svg> attribute width="-Infinity" jsPlumb
I faced with the same error when my container did not have any size. I can assume you should specify container explicitly for...
Read more >Mermaid drawings not rendering due to "<svg> attribute ...
An error occurred while fetching issues. ... drawings not rendering due to "<svg> attribute viewBox: Expected number, "0 0 -Infinity -Infin…
Read more >viewBox - SVG: Scalable Vector Graphics - MDN Web Docs
The value of the viewBox attribute is a list of four numbers: min-x , min-y , width and height . The numbers, which...
Read more >Error: Invalid value for <svg> attribute width="-Infinity"
So I just create a timeout promise to wait some 250 ms (rather arbitrary, adjust as will, perhaps even 0 is OK) before...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

The problem is with calling init. If you dont call it like this…
then the
startOnLoaddefaults to True. The page may have no graph/chart text info yet, and this makes the svg error happen.Actually, I think I figure it out, this error happens when you try to use mermaid.init() in a div with class “mermaid” and this div is empty, without the graph definition. I tested it in all versions above 4.0, including 4.0 and they all have this problem, although the version in the ‘editor’ folder, which I believe is an much older one, works fine.