javascript - 带有内联 css 的 svg 到图像数据 uri

Question

所以我目前尝试将 SVG 转换为带有数据 uri 的图像，它适用于简单的 SVG，但是我将美人鱼 js 用于包含内部 css 和其他元素的复杂图表和图形，这是一个示例:

<div class="mermaid" data-processed="true"><svg id="mermaidChart1" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 1112 268" style="max-width:1112px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart1 .node { fill:#ffa; stroke:#666; stroke-width:3px; }
#mermaidChart1 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart1 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart1 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 100%; vertical-align: baseline; background: transparent; }
#markdown-preview .mermaid .label { color: rgb(51, 51, 51); }
#markdown-preview .node rect, #markdown-preview .node circle, #markdown-preview .node polygon { fill: rgb(238, 238, 238); stroke: rgb(51, 51, 51); stroke-width: 1px; }
#markdown-preview .edgePath .path { stroke: rgb(51, 51, 51); }
#markdown-preview .cluster rect { fill: rgb(255, 255, 222) !important; rx: 4px !important; stroke: rgb(170, 170, 51) !important; stroke-width: 1px !important; }
#markdown-preview .cluster text { fill: rgb(51, 51, 51); }
#markdown-preview text { font-family: 'Roboto Slab', verdana, arial; font-size: 14px; }
/*  */
</style><g><g class="output"><g class="clusters"><g class="cluster" id="subGraph2" transform="translate(969,124)" style="opacity: 1;"><g class="label"><g transform="translate(-49.5,-12)"><foreignObject width="99" height="24"><div style="display: inline-block; white-space: nowrap;">subGraph2</div></foreignObject></g></g><rect width="206" height="208" x="-103" y="-104"></rect><text x="0" y="-90" fill="black" stroke="none" id="mermaidChart1Text" style="text-anchor: middle;"> Effects</text></g><g class="cluster" id="subGraph1" transform="translate(581.5,124)" style="opacity: 1;"><g class="label"><g transform="translate(-48,-12)"><foreignObject width="96" height="24"><div style="display: inline-block; white-space: nowrap;">subGraph1</div></foreignObject></g></g><rect width="469" height="208" x="-234.5" y="-104"></rect><text x="0" y="-90" fill="black" stroke="none" id="mermaidChart1Text" style="text-anchor: middle;"> Combat Scenario</text></g><g class="cluster" id="subGraph0" transform="translate(158.5,124)" style="opacity: 1;"><g class="label"><g transform="translate(-49.5,-12)"><foreignObject width="99" height="24"><div style="display: inline-block; white-space: nowrap;">subGraph0</div></foreignObject></g></g><rect width="277" height="208" x="-138.5" y="-104"></rect><text x="0" y="-90" fill="black" stroke="none" id="mermaidChart1Text" style="text-anchor: middle;"> Weapon &amp; Target</text></g></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M257,77L297,77L322,77L347,77L403.9148936170213,102" marker-end="url(#arrowhead125)" style="fill:none"></path><defs><marker id="arrowhead125" 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" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M272,171L297,171L322,171L347,171L403.9148936170213,146" marker-end="url(#arrowhead126)" style="stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;"></path><defs><marker id="arrowhead126" 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" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M504.0851063829787,102L561,77L595,77" marker-end="url(#arrowhead127)" style="fill:none"></path><defs><marker id="arrowhead127" 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" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M504.0851063829787,146L561,171L586,171" marker-end="url(#arrowhead128)" style="fill:none"></path><defs><marker id="arrowhead128" 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" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M782,77L816,77L841,77L866,77L891,77" marker-end="url(#arrowhead129)" style="fill:none"></path><defs><marker id="arrowhead129" 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" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M791,171L816,171L841,171L866,171L908.5,171" marker-end="url(#arrowhead130)" style="fill:none"></path><defs><marker id="arrowhead130" 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" style="fill: #333"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node" id="Damage" transform="translate(688.5,77)" style="opacity: 1;"><rect rx="5" ry="5" x="-93.5" y="-22" width="187" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-83.5,-12)"><foreignObject width="167" height="24"><div style="display: inline-block; white-space: nowrap;">DamageCalculator</div></foreignObject></g></g></g><g class="node" id="Output" transform="translate(969,77)" style="opacity: 1;"><rect rx="5" ry="5" x="-78" y="-22" width="156" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-68,-12)"><foreignObject width="136" height="24"><div style="display: inline-block; white-space: nowrap;">Bonus Damage</div></foreignObject></g></g></g><g class="node" id="Visual" transform="translate(688.5,171)" style="opacity: 1;"><rect rx="5" ry="5" x="-102.5" y="-22" width="205" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-92.5,-12)"><foreignObject width="185" height="24"><div style="display: inline-block; white-space: nowrap;">VisualEffectHandler</div></foreignObject></g></g></g><g class="node" id="Output2" transform="translate(969,171)" style="opacity: 1;"><rect rx="5" ry="5" x="-60.5" y="-22" width="121" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-50.5,-12)"><foreignObject width="101" height="24"><div style="display: inline-block; white-space: nowrap;">Set On Fire</div></foreignObject></g></g></g><g class="node" id="CombatHandler" transform="translate(454,124)" style="opacity: 1;"><rect rx="5" ry="5" x="-82" y="-22" width="164" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-72,-12)"><foreignObject width="144" height="24"><div style="display: inline-block; white-space: nowrap;">CombatHandler</div></foreignObject></g></g></g><g class="node" id="Tags" transform="translate(158.5,77)" style="opacity: 1;"><rect rx="5" ry="5" x="-98.5" y="-22" width="197" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-88.5,-12)"><foreignObject width="177" height="24"><div style="display: inline-block; white-space: nowrap;">silver, magic, sharp</div></foreignObject></g></g></g><g class="node" id="Optional" transform="translate(158.5,171)" style="opacity: 1;"><rect rx="5" ry="5" x="-113.5" y="-22" width="227" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-103.5,-12)"><foreignObject width="207" height="24"><div style="display: inline-block; white-space: nowrap;">werewolf, undead, frail</div></foreignObject></g></g></g></g></g></g></svg></div>

现在的问题是当我以 svg 标签为目标并像这样进行 xml 序列化时:

var svgToDataUri = function(svgElement){

        console.log("converting svg to datauri");

        // Create canvas for converting image to data URL
        var image = document.createElement("img");
        var parent = svgElement.parentElement;
        image.style.width = svgElement.width + "px";
        image.style.height = svgElement.height + "px";

        // get svg data
        var xml = new XMLSerializer().serializeToString(svgElement);

        // make it base64
        var svg64 = btoa(xml);
        var image64 = 'data:image/svg+xml;base64,' + svg64;

        // Get data URL encoding of image
        image.setAttribute("src", image64);
        parent.insertBefore(image, svgElement);
        parent.removeChild(svgElement);
    };

输出图像缺少位并且似乎没有正确设置样式，即使它基本上替换了现有内容所以页面上应该具有所有相同的样式，所以当输出更复杂时我需要做任何特殊的事情吗svg 元素到图像或者这应该有效吗？ (在 FF、Chrome 中试过)

这是实际输出和期望输出的示例:

正如您所看到的，它只是将部分涂黑并且一些线条不可见，下面的线条看起来就像我期望的那样。

Answer 1

• #markdown-preview不会作为您的 svg 的任何元素的 id 出现 - 或与此相关的已发布 html 的 id。这意味着它不会像您预期的那样呈现为原始 svg(请参见下面的第二张图片)。
• 可能最初围绕 div 的 html 确实包含具有该 ID 的元素。
• 快速修复:为 svg 中的外部组提供 markdown-preview id:替换 </style><g><g class="output">与 </style><g id="markdown-preview"><g class="output"> (见附件和下面的 HTML 片段图片)
• 永久修复:提交有关呈现 svg 的软件的问题。

结果

我取消了 parent.removeChild(svgElement); 的注释在你的代码中，这样我就可以同时看到 img (每个中的第一个)和原始 svg(第二个)。

固定的:

原始 HTML:

我用来重现“固定”的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" defer>
            var svgToDataUri = function(svgElement){

                    console.log("converting svg to datauri");

                    // Create canvas for converting image to data URL
                    var image = document.createElement("img");
                    var parent = svgElement.parentElement;
                    image.style.width = svgElement.width + "px";
                    image.style.height = svgElement.height + "px";

                    // get svg data
                    var xml = new XMLSerializer().serializeToString(svgElement);

                    // make it base64
                    var svg64 = btoa(xml);
                    var image64 = 'data:image/svg+xml;base64,' + svg64;

                    // Get data URL encoding of image
                    image.setAttribute("src", image64);
                    parent.insertBefore(image, svgElement);
                    // parent.removeChild(svgElement);
                };

        </script>

    </head>
    <body>

        <div class="mermaid" data-processed="true"><svg id="mermaidChart1" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 1112 268" style="max-width:1112px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
        #mermaidChart1 .node { fill:#ffa; stroke:#666; stroke-width:3px; }
        #mermaidChart1 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
        #mermaidChart1 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
        #mermaidChart1 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
        html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 100%; vertical-align: baseline; background: transparent; }
        #markdown-preview .mermaid .label { color: rgb(51, 51, 51); }
        #markdown-preview .node rect, #markdown-preview .node circle, #markdown-preview .node polygon { fill: rgb(238, 238, 238); stroke: rgb(51, 51, 51); stroke-width: 1px; }
        #markdown-preview .edgePath .path { stroke: rgb(51, 51, 51); }
        #markdown-preview .cluster rect { fill: rgb(255, 255, 222) !important; rx: 4px !important; stroke: rgb(170, 170, 51) !important; stroke-width: 1px !important; }
        #markdown-preview .cluster text { fill: rgb(51, 51, 51); }
        #markdown-preview text { font-family: 'Roboto Slab', verdana, arial; font-size: 14px; }
        /*  */
        </style><g id="markdown-preview"><g class="output"><g class="clusters"><g class="cluster" id="subGraph2" transform="translate(969,124)" style="opacity: 1;"><g class="label"><g transform="translate(-49.5,-12)"><foreignObject width="99" height="24"><div style="display: inline-block; white-space: nowrap;">subGraph2</div></foreignObject></g></g><rect width="206" height="208" x="-103" y="-104"></rect><text x="0" y="-90" fill="black" stroke="none" id="mermaidChart1Text" style="text-anchor: middle;"> Effects</text></g><g class="cluster" id="subGraph1" transform="translate(581.5,124)" style="opacity: 1;"><g class="label"><g transform="translate(-48,-12)"><foreignObject width="96" height="24"><div style="display: inline-block; white-space: nowrap;">subGraph1</div></foreignObject></g></g><rect width="469" height="208" x="-234.5" y="-104"></rect><text x="0" y="-90" fill="black" stroke="none" id="mermaidChart1Text" style="text-anchor: middle;"> Combat Scenario</text></g><g class="cluster" id="subGraph0" transform="translate(158.5,124)" style="opacity: 1;"><g class="label"><g transform="translate(-49.5,-12)"><foreignObject width="99" height="24"><div style="display: inline-block; white-space: nowrap;">subGraph0</div></foreignObject></g></g><rect width="277" height="208" x="-138.5" y="-104"></rect><text x="0" y="-90" fill="black" stroke="none" id="mermaidChart1Text" style="text-anchor: middle;"> Weapon &amp; Target</text></g></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M257,77L297,77L322,77L347,77L403.9148936170213,102" marker-end="url(#arrowhead125)" style="fill:none"></path><defs><marker id="arrowhead125" 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" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M272,171L297,171L322,171L347,171L403.9148936170213,146" marker-end="url(#arrowhead126)" style="stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;"></path><defs><marker id="arrowhead126" 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" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M504.0851063829787,102L561,77L595,77" marker-end="url(#arrowhead127)" style="fill:none"></path><defs><marker id="arrowhead127" 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" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M504.0851063829787,146L561,171L586,171" marker-end="url(#arrowhead128)" style="fill:none"></path><defs><marker id="arrowhead128" 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" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M782,77L816,77L841,77L866,77L891,77" marker-end="url(#arrowhead129)" style="fill:none"></path><defs><marker id="arrowhead129" 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" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M791,171L816,171L841,171L866,171L908.5,171" marker-end="url(#arrowhead130)" style="fill:none"></path><defs><marker id="arrowhead130" 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" style="fill: #333"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node" id="Damage" transform="translate(688.5,77)" style="opacity: 1;"><rect rx="5" ry="5" x="-93.5" y="-22" width="187" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-83.5,-12)"><foreignObject width="167" height="24"><div style="display: inline-block; white-space: nowrap;">DamageCalculator</div></foreignObject></g></g></g><g class="node" id="Output" transform="translate(969,77)" style="opacity: 1;"><rect rx="5" ry="5" x="-78" y="-22" width="156" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-68,-12)"><foreignObject width="136" height="24"><div style="display: inline-block; white-space: nowrap;">Bonus Damage</div></foreignObject></g></g></g><g class="node" id="Visual" transform="translate(688.5,171)" style="opacity: 1;"><rect rx="5" ry="5" x="-102.5" y="-22" width="205" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-92.5,-12)"><foreignObject width="185" height="24"><div style="display: inline-block; white-space: nowrap;">VisualEffectHandler</div></foreignObject></g></g></g><g class="node" id="Output2" transform="translate(969,171)" style="opacity: 1;"><rect rx="5" ry="5" x="-60.5" y="-22" width="121" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-50.5,-12)"><foreignObject width="101" height="24"><div style="display: inline-block; white-space: nowrap;">Set On Fire</div></foreignObject></g></g></g><g class="node" id="CombatHandler" transform="translate(454,124)" style="opacity: 1;"><rect rx="5" ry="5" x="-82" y="-22" width="164" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-72,-12)"><foreignObject width="144" height="24"><div style="display: inline-block; white-space: nowrap;">CombatHandler</div></foreignObject></g></g></g><g class="node" id="Tags" transform="translate(158.5,77)" style="opacity: 1;"><rect rx="5" ry="5" x="-98.5" y="-22" width="197" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-88.5,-12)"><foreignObject width="177" height="24"><div style="display: inline-block; white-space: nowrap;">silver, magic, sharp</div></foreignObject></g></g></g><g class="node" id="Optional" transform="translate(158.5,171)" style="opacity: 1;"><rect rx="5" ry="5" x="-113.5" y="-22" width="227" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-103.5,-12)"><foreignObject width="207" height="24"><div style="display: inline-block; white-space: nowrap;">werewolf, undead, frail</div></foreignObject></g></g></g></g></g></g></svg></div>

        <script>
            svgToDataUri(document.getElementById("mermaidChart1"));
        </script>
    </body>
</html>

顺便说一句这是我在开发 mscgen_js 时通过艰难的方式学到的一些东西，但您可能已经知道并为了简化您的示例代码而忽略了它:

• 向数据 uri 添加一个字符集，这样即使文本不是 ASCII(提供可用的字体)也能正确呈现 data:image/svg+xml;charset=utf-8;base64,
• 出于类似的原因，在链接/网址栏中转储生成的 uri 时 encodeURIComponent和 unescape在将它喂给 btoa 之前
• (...并考虑一种策略，以防您在 IE 上运行时达到浏览器最大 uri 长度)