Text is cut off in SVG exported from live editor

The following Mermaid markup generates this live view:

graph TD
A[Something] -->|begets| B[Something]

(Config is {}.)

However, in the exported SVG all text boxes are cropped on the right side:

Am I missing something?

[trueskawka]

I was able to address this issue when using the CLI to generate PNG by adding CSS to the parent element for edgeLabel. The foreignObject width is too narrow for labels to be properly displayed, so it should allow for overflow (I think the math might be slightly off when calculating the label width).

.label foreignObject {
    overflow: visible;
}

It doesn’t seem to be working for SVG, but it might be a similar issue.

Edit: Oh, interesting, it does work if I pass the themeCSS, but not when I’m using a CSS file for the -C flag.

If you add this to the config, it should fix the label width:

"themeCSS": ".label foreignObject { overflow: visible; }"

[Drunkman]

I add this to config, and it work well.

{
    "themeCSS": ".label foreignObject { font-size: 14px; }"
}

But I still don’t know why mermaid add a style that make the font-size large so that graph label be cut off.