question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Invalid value for <svg> attribute viewBox="0 0 -Infinity -Infinity"

See original GitHub issue

Using 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:closed
  • Created 8 years ago
  • Reactions:5
  • Comments:16 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
StingyJackcommented, Mar 20, 2017

The problem is with calling init. If you dont call it like this…

  var config = {
        startOnLoad: false
    };
    mermaid.initialize(config);

then the startOnLoad defaults to True. The page may have no graph/chart text info yet, and this makes the svg error happen.

1reaction
LeonardoRamoscommented, Mar 2, 2016

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found