Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG image displays incorrectly in PDF output #5126

Closed
undergroundquizscene opened this issue Dec 5, 2018 · 7 comments
Closed

SVG image displays incorrectly in PDF output #5126

undergroundquizscene opened this issue Dec 5, 2018 · 7 comments

Comments

@undergroundquizscene
Copy link

@undergroundquizscene undergroundquizscene commented Dec 5, 2018

With pandoc version 2.5, when the SVG image below is linked to in a markdown file and output is produced with the command below, the SVG image appears incorrectly. I expect to see black lines and light-blue circles, as shown in the attached screenshot (this is how it appears when viewed with Quick Look or with Firefox). Instead, the circles are black and the lines are not visible.

I don’t know anything about the SVG format, so it could be that this SVG file (which was produced with mermaid CLI) is invalid. If so, we can close this issue and I will file another on their repository.

Pandoc command: pandoc --pdf-engine=xelatex input.md -o output.pdf

Desired/expected appearance (shown with Quick Look):

screenshot 2018-12-05 at 16 46 47

Undesired/unnexpected appearance in pandoc output:

screenshot 2018-12-05 at 16 50 24

SVG file:

<svg id="mermaid-1544021411676" width="100%" xmlns="http://www.w3.org/2000/svg" style="max-width: 845.78125px;" viewBox="0 0 845.78125 257.21875"><style>#mermaid-1544021411676 .label{font-family:trebuchet ms,verdana,arial;color:#333}#mermaid-1544021411676 .node circle,#mermaid-1544021411676 .node ellipse,#mermaid-1544021411676 .node polygon,#mermaid-1544021411676 .node rect{fill:#ececff;stroke:#9370db;stroke-width:1px}#mermaid-1544021411676 .node.clickable{cursor:pointer}#mermaid-1544021411676 .arrowheadPath{fill:#333}#mermaid-1544021411676 .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-1544021411676 .edgeLabel{background-color:#e8e8e8}#mermaid-1544021411676 .cluster rect{fill:#ffffde!important;stroke:#aa3!important;stroke-width:1px!important}#mermaid-1544021411676 .cluster text{fill:#333}#mermaid-1544021411676 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:trebuchet ms,verdana,arial;font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-1544021411676 .actor{stroke:#ccf;fill:#ececff}#mermaid-1544021411676 text.actor{fill:#000;stroke:none}#mermaid-1544021411676 .actor-line{stroke:grey}#mermaid-1544021411676 .messageLine0{marker-end:"url(#arrowhead)"}#mermaid-1544021411676 .messageLine0,#mermaid-1544021411676 .messageLine1{stroke-width:1.5;stroke-dasharray:"2 2";stroke:#333}#mermaid-1544021411676 #arrowhead{fill:#333}#mermaid-1544021411676 #crosshead path{fill:#333!important;stroke:#333!important}#mermaid-1544021411676 .messageText{fill:#333;stroke:none}#mermaid-1544021411676 .labelBox{stroke:#ccf;fill:#ececff}#mermaid-1544021411676 .labelText,#mermaid-1544021411676 .loopText{fill:#000;stroke:none}#mermaid-1544021411676 .loopLine{stroke-width:2;stroke-dasharray:"2 2";marker-end:"url(#arrowhead)";stroke:#ccf}#mermaid-1544021411676 .note{stroke:#aa3;fill:#fff5ad}#mermaid-1544021411676 .noteText{fill:#000;stroke:none;font-family:trebuchet ms,verdana,arial;font-size:14px}#mermaid-1544021411676 .section{stroke:none;opacity:.2}#mermaid-1544021411676 .section0{fill:rgba(102,102,255,.49)}#mermaid-1544021411676 .section2{fill:#fff400}#mermaid-1544021411676 .section1,#mermaid-1544021411676 .section3{fill:#fff;opacity:.2}#mermaid-1544021411676 .sectionTitle0,#mermaid-1544021411676 .sectionTitle1,#mermaid-1544021411676 .sectionTitle2,#mermaid-1544021411676 .sectionTitle3{fill:#333}#mermaid-1544021411676 .sectionTitle{text-anchor:start;font-size:11px;text-height:14px}#mermaid-1544021411676 .grid .tick{stroke:#d3d3d3;opacity:.3;shape-rendering:crispEdges}#mermaid-1544021411676 .grid path{stroke-width:0}#mermaid-1544021411676 .today{fill:none;stroke:red;stroke-width:2px}#mermaid-1544021411676 .task{stroke-width:2}#mermaid-1544021411676 .taskText{text-anchor:middle;font-size:11px}#mermaid-1544021411676 .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px}#mermaid-1544021411676 .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-1544021411676 .taskText0,#mermaid-1544021411676 .taskText1,#mermaid-1544021411676 .taskText2,#mermaid-1544021411676 .taskText3{fill:#fff}#mermaid-1544021411676 .task0,#mermaid-1544021411676 .task1,#mermaid-1544021411676 .task2,#mermaid-1544021411676 .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-1544021411676 .taskTextOutside0,#mermaid-1544021411676 .taskTextOutside1,#mermaid-1544021411676 .taskTextOutside2,#mermaid-1544021411676 .taskTextOutside3{fill:#000}#mermaid-1544021411676 .active0,#mermaid-1544021411676 .active1,#mermaid-1544021411676 .active2,#mermaid-1544021411676 .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-1544021411676 .activeText0,#mermaid-1544021411676 .activeText1,#mermaid-1544021411676 .activeText2,#mermaid-1544021411676 .activeText3{fill:#000!important}#mermaid-1544021411676 .done0,#mermaid-1544021411676 .done1,#mermaid-1544021411676 .done2,#mermaid-1544021411676 .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-1544021411676 .doneText0,#mermaid-1544021411676 .doneText1,#mermaid-1544021411676 .doneText2,#mermaid-1544021411676 .doneText3{fill:#000!important}#mermaid-1544021411676 .crit0,#mermaid-1544021411676 .crit1,#mermaid-1544021411676 .crit2,#mermaid-1544021411676 .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-1544021411676 .activeCrit0,#mermaid-1544021411676 .activeCrit1,#mermaid-1544021411676 .activeCrit2,#mermaid-1544021411676 .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-1544021411676 .doneCrit0,#mermaid-1544021411676 .doneCrit1,#mermaid-1544021411676 .doneCrit2,#mermaid-1544021411676 .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-1544021411676 .activeCritText0,#mermaid-1544021411676 .activeCritText1,#mermaid-1544021411676 .activeCritText2,#mermaid-1544021411676 .activeCritText3,#mermaid-1544021411676 .doneCritText0,#mermaid-1544021411676 .doneCritText1,#mermaid-1544021411676 .doneCritText2,#mermaid-1544021411676 .doneCritText3{fill:#000!important}#mermaid-1544021411676 .titleText{text-anchor:middle;font-size:18px;fill:#000}#mermaid-1544021411676 g.classGroup text{fill:#9370db;stroke:none;font-family:trebuchet ms,verdana,arial;font-size:10px}#mermaid-1544021411676 g.classGroup rect{fill:#ececff;stroke:#9370db}#mermaid-1544021411676 g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-1544021411676 .classLabel .box{stroke:none;stroke-width:0;fill:#ececff;opacity:.5}#mermaid-1544021411676 .classLabel .label{fill:#9370db;font-size:10px}#mermaid-1544021411676 .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-1544021411676 #compositionEnd,#mermaid-1544021411676 #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1544021411676 #aggregationEnd,#mermaid-1544021411676 #aggregationStart{fill:#ececff;stroke:#9370db;stroke-width:1}#mermaid-1544021411676 #dependencyEnd,#mermaid-1544021411676 #dependencyStart,#mermaid-1544021411676 #extensionEnd,#mermaid-1544021411676 #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1544021411676 .branch-label,#mermaid-1544021411676 .commit-id,#mermaid-1544021411676 .commit-msg{fill:#d3d3d3;color:#d3d3d3}</style><style>#mermaid-1544021411676 {
    color: rgb(0, 0, 0);
    font: normal normal 400 normal 16px / normal "Times New Roman";
  }</style><g transform="translate(-12, -12)"><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M92.90460311214034,73.78690428268042L124.140625,62.5L153.140625,62.5" marker-end="url(#arrowhead64)" style="fill:none"></path><defs><marker id="arrowhead64" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M76.48199585231791,119.01815333668044L124.140625,200.828125L153.140625,200.828125" marker-end="url(#arrowhead65)" style="fill:none"></path><defs><marker id="arrowhead65" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M191.05374995834717,56.08074542736521L227.140625,43.5L262.140625,43.5" marker-end="url(#arrowhead66)" style="fill:none"></path><defs><marker id="arrowhead66" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M185.32806097313494,77.30807105694734L227.140625,126.109375L268.00534435131766,167.88792695149047" marker-end="url(#arrowhead67)" style="fill:none"></path><defs><marker id="arrowhead67" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M300.4850727075089,38.48633960075451L336.140625,29L416.53125,29L490.921875,29L565.140625,29L639.359375,29L710.5703125,29L781.78125,29L820.968028289697,101.086502588328" marker-end="url(#arrowhead68)" style="fill:none"></path><defs><marker id="arrowhead68" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M296.73028627506534,55.85119923747463L336.140625,88.109375L383.2837989513613,131.92641248015738" marker-end="url(#arrowhead69)" style="fill:none"></path><defs><marker id="arrowhead69" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M823.0497895059885,136.32830491235362L810.78125,167.05208333333331L810.78125,174.38541666666666L830.28125,181.71875L849.78125,174.38541666666666L849.78125,167.05208333333331L837.5127104940115,136.32830491235362" marker-end="url(#arrowhead70)" style="fill:none"></path><defs><marker id="arrowhead70" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M192.140625,200.828125L227.140625,200.828125L263.22750004165283,188.2473795726348" marker-end="url(#arrowhead71)" style="fill:none"></path><defs><marker id="arrowhead71" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M301.140625,181.828125L336.140625,181.828125L372.3576174664261,173.26838489520424" marker-end="url(#arrowhead72)" style="fill:none"></path><defs><marker id="arrowhead72" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M448.55656179568774,130.6615547401851L490.921875,88.109375L526.0267829242856,108.47391684955136" marker-end="url(#arrowhead73)" style="fill:none"></path><defs><marker id="arrowhead73" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M392.9659708387614,201.62227991982675L371.140625,237.55208333333334L371.140625,244.88541666666666L416.53125,252.21875L461.921875,244.88541666666666L461.921875,237.55208333333334L440.0965291612386,201.62227991982675" marker-end="url(#arrowhead74)" style="fill:none"></path><defs><marker id="arrowhead74" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M610.359375,131.1640625L639.359375,131.1640625L672.0004373052085,145.67796546467468" marker-end="url(#arrowhead75)" style="fill:none"></path><defs><marker id="arrowhead75" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M521.3345351949959,142.37842149008105L490.921875,150.1640625L461.27810708640476,155.21053884823965" marker-end="url(#arrowhead76)" style="fill:none"></path><defs><marker id="arrowhead76" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M752.78125,162.828125L781.78125,162.828125L815.9290287347561,131.41964939183998" marker-end="url(#arrowhead77)" style="fill:none"></path><defs><marker id="arrowhead77" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M677.7412871493433,189.36146891204478L639.359375,220.3828125L565.140625,220.3828125L490.921875,220.3828125L452.43158110285566,190.60356495323856" marker-end="url(#arrowhead78)" style="fill:none"></path><defs><marker id="arrowhead78" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" transform="translate(124.140625,62.5)" style="opacity: 1;"><g transform="translate(-4,-9)" class="label"><foreignObject width="8" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">0</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(124.140625,200.828125)" style="opacity: 1;"><g transform="translate(-4,-9)" class="label"><foreignObject width="8" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">1</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(227.140625,43.5)" style="opacity: 1;"><g transform="translate(-4,-9)" class="label"><foreignObject width="8" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">0</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(227.140625,126.109375)" style="opacity: 1;"><g transform="translate(-4,-9)" class="label"><foreignObject width="8" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">1</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(565.140625,29)" style="opacity: 1;"><g transform="translate(-4,-9)" class="label"><foreignObject width="8" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">0</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(336.140625,88.109375)" style="opacity: 1;"><g transform="translate(-4,-9)" class="label"><foreignObject width="8" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">1</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(830.28125,181.71875)" style="opacity: 1;"><g transform="translate(-10,-9)" class="label"><foreignObject width="20" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">0,1</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(227.140625,200.828125)" style="opacity: 1;"><g transform="translate(-10,-9)" class="label"><foreignObject width="20" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">0,1</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(336.140625,181.828125)" style="opacity: 1;"><g transform="translate(-10,-9)" class="label"><foreignObject width="20" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">0,1</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(490.921875,88.109375)" style="opacity: 1;"><g transform="translate(-4,-9)" class="label"><foreignObject width="8" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">0</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(416.53125,252.21875)" style="opacity: 1;"><g transform="translate(-4,-9)" class="label"><foreignObject width="8" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">1</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(639.359375,131.1640625)" style="opacity: 1;"><g transform="translate(-4,-9)" class="label"><foreignObject width="8" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">0</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(490.921875,150.1640625)" style="opacity: 1;"><g transform="translate(-4,-9)" class="label"><foreignObject width="8" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">1</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(781.78125,162.828125)" style="opacity: 1;"><g transform="translate(-4,-9)" class="label"><foreignObject width="8" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">0</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(565.140625,220.3828125)" style="opacity: 1;"><g transform="translate(-4,-9)" class="label"><foreignObject width="8" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">1</span></div></foreignObject></g></g></g><g class="nodes"><g class="node" id="A" transform="translate(57.5703125,86.5546875)" style="opacity: 1;"><circle x="-37.5703125" y="-19.5" r="37.5703125"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-27.5703125,-9.5)"><foreignObject width="55.140625" height="19"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">A: Start</div></foreignObject></g></g></g><g class="node" id="B" transform="translate(172.640625,62.5)" style="opacity: 1;"><circle x="-14.53125" y="-19.5" r="19.5"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-4.53125,-9.5)"><foreignObject width="9.0625" height="19"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">B</div></foreignObject></g></g></g><g class="node" id="C" transform="translate(281.640625,43.5)" style="opacity: 1;"><circle x="-14.7890625" y="-19.5" r="19.5"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-4.7890625,-9.5)"><foreignObject width="9.578125" height="19"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">C</div></foreignObject></g></g></g><g class="node" id="D" transform="translate(830.28125,118.21875)" style="opacity: 1;"><circle x="-14.90625" y="-19.5" r="19.5"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-4.90625,-9.5)"><foreignObject width="9.8125" height="19"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">D</div></foreignObject></g></g></g><g class="node" id="E" transform="translate(172.640625,200.828125)" style="opacity: 1;"><circle x="-14.2890625" y="-19.5" r="19.5"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-4.2890625,-9.5)"><foreignObject width="8.578125" height="19"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">E</div></foreignObject></g></g></g><g class="node" id="F" transform="translate(281.640625,181.828125)" style="opacity: 1;"><circle x="-14.203125" y="-19.5" r="19.5"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-4.203125,-9.5)"><foreignObject width="8.40625" height="19"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">F</div></foreignObject></g></g></g><g class="node" id="G" transform="translate(416.53125,162.828125)" style="opacity: 1;"><circle x="-45.390625" y="-19.5" r="45.390625"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-35.390625,-9.5)"><foreignObject width="70.78125" height="19"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">G: Accept</div></foreignObject></g></g></g><g class="node" id="H" transform="translate(565.140625,131.1640625)" style="opacity: 1;"><circle x="-45.21875" y="-19.5" r="45.21875"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-35.21875,-9.5)"><foreignObject width="70.4375" height="19"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">H: Accept</div></foreignObject></g></g></g><g class="node" id="I" transform="translate(710.5703125,162.828125)" style="opacity: 1;"><circle x="-42.2109375" y="-19.5" r="42.2109375"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-32.2109375,-9.5)"><foreignObject width="64.421875" height="19"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">I: Accept</div></foreignObject></g></g></g></g></g></g></svg>
@undergroundquizscene

This comment has been minimized.

Copy link
Author

@undergroundquizscene undergroundquizscene commented Dec 5, 2018

Let me know if there’s more info I can provide to help!

@wilx

This comment has been minimized.

Copy link
Contributor

@wilx wilx commented Dec 6, 2018

I confirm that. The issue seems to be in rsvg-convert that seems to be used by Pandoc internally. I manually tested with rsvg-convert -f pdf -a -o test.svg.pdf test.svg and got the same wrong result, while browser shows the SVG just fine.

As a workaround, I suggest you try to export directly into PDF using the mermaid CLI tool and include PDFs in your document.

@wilx

This comment has been minimized.

Copy link
Contributor

@wilx wilx commented Dec 6, 2018

Actually, opening the SVG file in Inkscape shows the same output. It seems that neither tool likes the svg:foreignObject in the source SVG.

@mb21

This comment has been minimized.

Copy link
Collaborator

@mb21 mb21 commented Dec 6, 2018

You can try an svg validator... but my guess would be that rsvg-convert just doesn't support svg:foreignObject... so you could file an issue there.

Either way, there's nothing we can do in pandoc.

@mb21 mb21 closed this Dec 6, 2018
@undergroundquizscene

This comment has been minimized.

Copy link
Author

@undergroundquizscene undergroundquizscene commented Dec 6, 2018

Cool, thanks for the help!

@Gowa2017

This comment has been minimized.

Copy link

@Gowa2017 Gowa2017 commented Jan 12, 2020

Seems mermaid's svg style is in the svg tag , bug the standard svg format dose not recoginize the style.

@Gowa2017

This comment has been minimized.

Copy link

@Gowa2017 Gowa2017 commented Jan 12, 2020

Ok, there is a solution.https://gitlab.gnome.org/GNOME/librsvg/issues/428

Like the svg file:

<svg id="mermaid-1578839518522" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 784 148">
<style>
#mermaid-1578839518522 label{font-family:trebuchet ms,verdana,arial;color:#333}
#mermaid-1578839518522 node circle,
#mermaid-1578839518522 node ellipse,
#mermaid-1578839518522 node polygon,
#mermaid-1578839518522 node rect{fill:#ececff;stroke:#9370db;stroke-width:1px}
#mermaid-1578839518522 node.clickable{cursor:pointer}
#mermaid-1578839518522 arrowheadPath{fill:#333}
  <g></g><g class="grid" transform="translate(75, 98)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#000" d="M0.5,-63V0.5H634.5V-63"></path><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="#000" y2="-63"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2019-12-09</text></g><g class="tick" opacity="1" transform="translate(79.5,0)"><line stroke="#000" y2="-63"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2019-12-09</text></g><g class="tick" opacity="1" transform="translate(159.5,0)"><line stroke="#000" y2="-63"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2019-12-10</text></g><g class="tick" opacity="1" transform="translate(238.5,0)"><line stroke="#000" y2="-63"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2019-12-10</text></g><g class="tick" opacity="1" transform="translate(317.5,0)"><line stroke="#000" y2="-63"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2019-12-11</text></g><g class="tick" opacity="1" transform="translate(396.5,0)"><line stroke="#000" y2="-63"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2019-12-11</text></g><g class="tick" opacity="1" transform="translate(476.5,0)"><line stroke="#000" y2="-63"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2019-12-12</text></g><g class="tick" opacity="1" transform="translate(555.5,0)"><line stroke="#000" y2="-63"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2019-12-12</text></g><g class="tick" opacity="1" transform="translate(634.5,0)"><line stroke="#000" y2="-63"></line><text fill="#000" y="3" dy="1em" stroke="none" font-size="10" style="text-anchor: middle;">2019-12-13</text></g></g><g><rect x="0" y="48" width="746.5" height="24" class="section section0"></rect><rect x="0" y="72" width="746.5" height="24" class="section section0"></rect></g><g><rect rx="3" ry="3" x="75" y="50" width="159" height="20" class="task  done0"></rect><rect rx="3" ry="3" x="234" y="74" width="475" height="20" class="task  done0"></rect><text font-size="11" x="154.5" y="63.5" text-height="20" class="taskText taskText0  doneText0">A </text><text font-size="11" x="471.5" y="87.5" text-height="20" class="taskText taskText0  doneText0">B </text></g><g><text x="10" y="74" class="sectionTitle sectionTitle0">one</text></g><g class="today"><line x1="5613" x2="5613" y1="25" y2="123" class="today"></line></g><text x="392" y="25" class="titleText">title</text></svg>

If I remove all '#mermaid-1578839518522' in style tag group , the out put is OK

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.