带有背景图像到 png 转换的 SVG/Canvas 提供黑色背景

如何解决带有背景图像到 png 转换的 SVG/Canvas 提供黑色背景

我有一个使用图像定义的背景图案的 svg。将此 SVG 转换为 png 并保存在磁盘中，我使用 canvg 首先转换为画布和 png 图像，如下所示：

  const canvas = document.querySelector('canvas');
   const ctx = canvas.getContext('2d');
   var svgString = new XMLSerializer().serializetoString(document.querySelector('svg'));
   v = canvg.Canvg.fromString(ctx,svgString);
   v.start();
   var img = canvas.toDataURL("image/png");
    $("#canvasimg").attr("src",canvas2.toDataURL("img/png"));

但是在图像中定义了模式的 svg 部分被渲染为黑色。 原始 SVG 如下：

图像如上所示，带有黑色矩形，句柄在 svg 中。

如何获取和保存在 svg 中完全绘制的 png 图像？

我的 SVG 代码如下：

<svg id="lin" viewBox="-1 0 1366 654" preserveAspectRatio="xMidYMin slice" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" style="z-index: 2; margin: 0px; padding: 0px; width: 100vw; height: 100vh; position: absolute; inset: 0px; cursor: default;">
        <defs id="patternDefination">
           
            <pattern class="ptnMaterial"  id="Mirror1" patternUnits="userSpaceOnUse" width="256" height="256">
                    <image xlink:href="https://i.imgur.com/dt5Fa7t.png" x="0" y="0" width="256" height="256"></image>
            </pattern>
            <pattern id="smallGrid" width="60" height="60" patternUnits="userSpaceOnUse">
                <path d="M 60 0 L 0 0 0 60" fill="none" stroke="#777" stroke-width="0.25"></path>
            </pattern>
            <pattern id="grid" width="180" height="180" patternUnits="userSpaceOnUse">
                <rect width="180" height="180" fill="url(#smallGrid)"></rect>
                <path d="M 200 10 L 200 0 L 190 0 M 0 10 L 0 0 L 10 0 M 0 190 L 0 200 L 10 200 M 190 200 L 200 200 L 200 190" fill="none" stroke="#999" stroke-width="0.8"></path>
            </pattern>
            <pattern id="hatch" width="5" height="5" patternTransform="rotate(50 0 0)" patternUnits="userSpaceOnUse">
                <path d="M 0 0 L 0 5 M 10 0 L 10 10 Z" style="stroke:#666;stroke-width:5;"></path>
            </pattern>
        </defs>
        <g id="Boxgrid">
            <rect width="8000" height="5000" x="-3500" y="-2000" fill="url(#grid)"></rect>
        </g>
        <g id="Boxpath"></g>
        <g id="BoxSurface"><path d="M552,320 L754,72 L552,320" fill="#fff" fill-opacity="1" stroke="none" fill-rule="evenodd" class="room"></path></g>
        <g id="BoxRoom"><path d="M552,320" fill="url(#Mirror1)" fill-opacity="1" stroke="none" fill-rule="evenodd" class="room"></path></g>
        <g id="Boxwall"><path d="M559.5,79.5 L544.5,64.5 L544.5,327.5 L559.5,312.5 Z" stroke="none" fill="#ff0000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" fill-rule="nonzero"></path><path d="M544.5,64.5 L559.5,79.5 L746.5,79.5 L761.5,64.5 Z" stroke="none" fill="#ff0000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" fill-rule="nonzero"></path><path d="M761.5,64.5 L746.5,312.5 L761.5,327.5 Z" stroke="none" fill="#ff0000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" fill-rule="nonzero"></path><path d="M559.5,312.5 L544.5,327.5 L761.5,327.5 L746.5,312.5 Z" stroke="none" fill="#ff0000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" fill-rule="nonzero"></path></g>
        <g id="Boxcarpentry"></g>
        <g id="BoxEnergy"></g>
        <g id="BoxFurniture"></g>
        <g id="Boxbind"></g>
        <g id="BoxArea"><text x="652" y="174" style="fill:#343938;font-weight:normal;font-size:12.5px" text-anchor="middle">A : 12.10 m²</text></g>
        <g id="BoxRib"><text x="559" y="190.5" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(90 559,195.5)">3.88</text><text x="652.5" y="59" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(0 652.5,64)">3.62</text><text x="761" y="190.5" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(90 761,195.5)">4.38</text><text x="652.5" y="307" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(0 652.5,312)">3.12</text><text x="544" y="210.5" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(90 544,195.5)">4.38</text><text x="652.5" y="94" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(0 652.5,79)">3.12</text><text x="746" y="210.5" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(90 746,195.5)">3.88</text><text x="652.5" y="342" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(0 652.5,327)">3.62</text></g>
        <g id="BoxScale" style="display: inline-block;"><path d="m794,72 l60,0 m-40,10 l10,-10 l10,10 m-10,-10 l0,248 m-30,0 l60,-10M552,32 l0,-60 m10,40 l-10,-10 m-10,10 l202,0 m0,30 l0,-60 m-10,40 l10,-10 l-10,-10" stroke="#555" fill="none" stroke-width="0.3" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" fill-rule="nonzero"></path><text x="824" y="231" fill="#555" text-anchor="middle" transform="rotate(270 824,196)">4.13 m</text><text x="653" y="-23" fill="#555" text-anchor="middle">3.37 m</text></g>
        <g id="BoxText"></g>
        <g id="BoxDebug"></g>
 </svg>