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.

CLI: Invisible text, lines in SVG output

See original GitHub issue

When converting a graph to SVG with the mermaid CLI tool, paths and text are added to the SVG output, but are not visible when viewing the output file in Chrome or Inkscape.

The invisible lines appear to be caused by a missing stroke color, but I can’t tell what’s happening with the text.

Output appears correctly in the live editor, but the downloaded SVG appears to only be browser-friendly (I believe this is expected).

Actual mermaid call

$ mermaid -s simple.mmd

Graph input

graph TD
    test-->test2

Test files

Input mmd file and output SVG and PNG files: simple.mmd.zip

PNG Output:

simple mmd

Version info

$ phantomjs --version
1.9.8

$ mermaid --version
0.5.8

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:7

github_iconTop GitHub Comments

1reaction
Kochisecommented, Nov 12, 2020

d:\mermaid_test>npx mmdc -V 8.8.2-beta.8

Issue remains

stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*] 

d:\mermaid_test>npx mmdc -i state.mmd -o state.svg

state

However I got correct case, ‘.edgePath’ and ‘.edgeLabel’

0reactions
alexpovelcommented, Nov 23, 2021

Experienced the same issue opening the exported/downloaded SVG in InkScape. The browser (Firefox) renders it fine in a tab of its own. From that tab, I printed to PDF and opened that in InkScape, then saved as SVG after removing the cruft (select just the drawing, move away, select everything else remaining at the old location, delete, resize page to content, save as SVG).

Read more comments on GitHub >

github_iconTop Results From Across the Web

<text> - SVG: Scalable Vector Graphics - MDN Web Docs
The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, ...
Read more >
How can I limit or clip text in SVG? - html - Stack Overflow
You can use clip-path to clip to whatever shape you want, see e.g masking-path-01 from the svg testsuite. Relevant parts, defining the clip...
Read more >
Text — SVG 2
The light-blue lines indicate the shift in baseline. SVG further assumes that for each glyph in the font data for a font, there...
Read more >
Accessible SVGs | CSS-Tricks
A quick note on hiding elements (rect, circle, text) from AT in an SVG – The only way to “hide” elements from a...
Read more >
Annotated List of Command-line Options - ImageMagick
If the SVG delegate library is not present, the option is ignored. Use +clip to disable clipping for subsequent operations. -clip-mask. Clip the...
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