在我发布此内容之前,我检查了数十个stackoverflow,甚至尝试了不同的方法,但是我从来没有做对。
这是我的第一个试用代码。它应该做的是将svg转换为png,然后在下载时下载。它在Chrome浏览器中完美运行,但在Firefox中无法正常运行。
svgcontent和画布的宽度/高度具有有效值。 “ fname”是也具有有效值的文件名
var svgcontent = $(this).closest('.svg-divinner').find(' .svg-file')[0].contentDocument.documentElement;
var cheight = svgcontent.viewBox.baseVal.height;
var cwidth = svgcontent.viewBox.baseVal.width;
var svgText = (new XMLSerializer()).serializeToString(svgcontent);
var img = new Image();
img.onload = function (){
var canvas = document.createElement("canvas");
canvas.width = cwidth;
canvas.height = cheight;
var ctxt = canvas.getContext("2d", {preserveDrawingBuffer: true});
ctxt.fillStyle = "rgba(0,0,0,0.0)";
ctxt.fillRect(0, 0, canvas.width, canvas.height);
ctxt.drawImage(this, 0, 0);
var a = document.createElement("a");
a.href = canvas.toDataURL("image/png");
a.download = fname+".png"
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
img.src = "data:image/svg+xml;utf8," + encodeURIComponent(svgText);
因此,上面的代码无法正常工作。然后我尝试使用回调的另一个选项,下面的代码。 drawInlineSVG()的作用是在进行回调后下载uri。我找不到在哪里引用drawInlineSVG,但我也在stackoverflow中找到了它。
var svgcontent = $(this).closest('.svg-divinner').find(' .svg-file')[0].contentDocument.documentElement;
var cheight = svgcontent.viewBox.baseVal.height;
var cwidth = svgcontent.viewBox.baseVal.width;
var svgText = (new XMLSerializer()).serializeToString(svgcontent);
var ctxt = canvas.getContext("2d", {preserveDrawingBuffer: true});
ctxt.fillStyle = "rgba(0,0,0,0.0)";
ctxt.fillRect(0, 0, canvas.width, canvas.height);
var img = new Image();
drawInlineSVG(ctxt, svgText, function(uri) {
var a = document.createElement("a");
a.href = canvas.toDataURL();
a.download = fname+".png";
document.body.appendChild(a); a.click(); document.body.removeChild(a);
});
function drawInlineSVG(ctx, rawSVG, callback) {
var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
domURL = self.URL || self.webkitURL || self,
url = domURL.createObjectURL(svg),
img = new Image;
img.onload = function () {
ctxt.drawImage(this, 0, 0,canvas.width,canvas.height);
domURL.revokeObjectURL(url);
callback(this);
};
img.src = url;
}
两个选项均无效。它仍然返回相同的旧“ AAAA”值
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQ4CAYAAADo08FDAAAfiUlEQVR4nOzBAQEAAACAkP6v7ggKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA…
请,我不是专家,对此我真的非常感谢。
编辑:这是我拥有的SVG
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2000 2000" style="enable-background:new 0 0 2000 2000;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F7F7F7;}
.st1{fill:#494949;}
.st2{opacity:0.5;}
.st3{fill:#00AEF0;}
.st4{fill:#0A0A0A;}
.st5{fill:#FFFFFF;}
.st6{opacity:0.15;fill:#DDD545;}
.st7{fill:#DDD545;}
.st8{fill:#FAB9AF;}
.st9{fill:#333333;}
</style>
<g id="floor_1_">
<path class="st0" d="M871.87,1495.69c-176.64-128.92-171.47-134.33-233.38-174.9c-183.53-120.25-259.25-92.49-291.04-172
c-29.35-73.41,28.86-112.95,61.32-298.59c35.52-203.16-20.47-234.32,22.88-308.25c72.09-122.94,233.45-47.95,591.23-144.94
c225.93-61.25,267.63-119.9,370.66-86c147.45,48.52,219.06,220.31,271.82,346.9c64.34,154.37,146.38,351.19,66.81,500.54
c-89.18,167.4-274.94,75.37-487.81,307.28c-56.65,61.72-98.45,128.11-173.89,133.35C1023.41,1602.35,987.57,1580.13,871.87,1495.69
z"/>
<ellipse id="floor" class="st1" cx="982.24" cy="1589.95" rx="723.12" ry="61"/>
</g>
<g id="Wall_and_debris">
<g class="st2">
<polygon class="st3" points="816.64,748.5 816.64,643.45 919.35,643.45 919.35,545.4 1397.91,545.4 1397.91,655.12
1502.96,655.12 1502.96,932.92 1306.87,932.92 1306.87,1021.63 1108.44,1021.63 1108.44,937.59 921.69,937.59 921.69,846.55
818.97,846.55 "/>
</g>
<g class="st2">
<polygon class="st3" points="891.82,748.5 891.82,643.45 983.29,643.45 983.29,545.4 1397.75,545.63 1397.75,655.35
1502.96,655.12 1502.96,932.92 1307.08,932.69 1307.08,1021.84 1151.66,1021.63 1151.66,937.59 985.37,937.59 985.37,846.55
893.9,846.55 "/>
</g>
<g>
<rect x="825.54" y="456.89" class="st4" width="692.6" height="3"/>
</g>
<g>
<rect x="864.4" y="1019.96" class="st4" width="692.6" height="3"/>
</g>
<g>
<rect x="1306.87" y="934.62" class="st4" width="250.13" height="3"/>
</g>
<g>
<rect x="864.4" y="934.62" class="st4" width="244.05" height="3"/>
</g>
<g>
<rect x="854.72" y="459.81" class="st4" width="3" height="82.39"/>
</g>
<g>
<rect x="1047.49" y="459.81" class="st4" width="3" height="82.39"/>
</g>
<g>
<rect x="953.78" y="942.87" class="st4" width="3" height="82.39"/>
</g>
<g>
<rect x="1019.3" y="1022.11" class="st4" width="3" height="82.39"/>
</g>
<g>
<rect x="1231.12" y="459.81" class="st4" width="3" height="82.39"/>
</g>
<g>
<rect x="1467.32" y="934.49" class="st4" width="3" height="82.39"/>
</g>
<g>
<rect x="1198.36" y="1026.69" class="st4" width="3" height="82.39"/>
</g>
<g>
<rect x="1392.65" y="1026.69" class="st4" width="3" height="82.39"/>
</g>
<g>
<rect x="1407.13" y="459.81" class="st4" width="3" height="82.39"/>
</g>
<g>
<rect x="1398.13" y="653.47" class="st4" width="153.91" height="3"/>
</g>
<g>
<rect x="773.34" y="642.04" class="st4" width="146.29" height="3"/>
</g>
<g>
<rect x="835.06" y="543.75" class="st4" width="660.6" height="3"/>
</g>
<g>
<path class="st4" d="M1025.9,1541.45H904.8v-71.57h121.1V1541.45z M907.8,1538.45h115.1v-65.57H907.8V1538.45z"/>
</g>
<g>
<path class="st4" d="M1067.24,1520.6l-60.43-95.64l1.03-0.84l85.34-69.82l54.7,124.24L1067.24,1520.6z M1010.76,1425.6
l57.54,91.06l75.69-39.49l-51.97-118.06L1010.76,1425.6z"/>
</g>
<g>
<path class="st4" d="M1125.12,1547.81l19.67-71.45h164.17v68.5L1125.12,1547.81z M1147.07,1479.36l-18,65.39l176.88-2.84v-62.55
H1147.07z"/>
</g>
<g>
<path class="st4" d="M1389.32,1538.79h-54.95l-15.99-98.33l84.56,55.05L1389.32,1538.79z M1336.93,1535.79h50.2l12.28-39.01
l-76.97-50.1L1336.93,1535.79z"/>
</g>
</g>
<g id="Plant">
<g class="st2">
<path class="st3" d="M395.47,1378.19c-41.29-2.56-76.29-37.9-76.56-67.69c-0.22-24.61,23.37-31,24.18-62.05
c0.69-26.82-16.63-32.77-13.7-55.61c3.08-23.98,26.57-51.52,54.8-51.58c32.45-0.06,54.53,36.21,56.41,65.28
c1.28,19.76-10.8,22.49-10.48,41.1c0.67,38.08,48.2,48.92,47.55,77.36C477.07,1351.11,436.12,1380.71,395.47,1378.19z"/>
</g>
<g>
<rect x="392.9" y="1181.56" class="st5" width="2" height="216.78"/>
</g>
<g>
<path class="st5" d="M393.59,1256.61c-19.89-1.34-22.66-30.61-22.77-31.85l1.99-0.17c0.03,0.29,2.73,28.81,20.91,30.03
L393.59,1256.61z"/>
</g>
<g>
<path class="st3" d="M364.73,1396.73h57.46c5.63,0,10.11,4.72,9.8,10.35l-7.83,145.13c-0.27,5.06-4.35,9.08-9.41,9.28l-41.83,1.67
c-5.37,0.21-9.91-3.92-10.2-9.29l-7.8-146.8C354.62,1401.45,359.1,1396.73,364.73,1396.73z"/>
</g>
<g>
<path class="st5" d="M393.59,1332.36c-14.19-0.95-16.15-21.7-16.22-22.58l1.99-0.17c0.02,0.2,1.89,19.92,14.37,20.76
L393.59,1332.36z"/>
</g>
<g>
<path class="st5" d="M392.82,1300.94l-0.1-2c16.95-0.82,19.39-19.21,19.49-19.99l1.99,0.24
C414.17,1279.4,411.47,1300.03,392.82,1300.94z"/>
</g>
<g>
<path class="st5" d="M393.63,1356.54l-0.1-2c12.03-0.58,13.78-13.67,13.84-14.23l1.99,0.24
C409.34,1340.71,407.36,1355.88,393.63,1356.54z"/>
</g>
</g>
<g id="Light">
<polygon class="st6" points="919.35,545.4 665,568 674,1050 739,1182 1307.08,1021.84 1307,938 1502.96,932.92 1502.96,655.12
1398,656 1397.75,545.63 "/>
<path class="st7" d="M1474.48,877.75l-28.22,1.73l14.54-16.43c0.41-0.47,0.37-1.18-0.1-1.59c-0.47-0.41-1.18-0.37-1.59,0.1
l-14.54,16.43l-2.03-33.12c-0.05-0.83-0.76-1.46-1.59-1.41c-0.83,0.05-1.46,0.76-1.41,1.59l2.03,33.12l-20.08-17.76
c-0.47-0.41-1.18-0.37-1.59,0.1c-0.41,0.47-0.37,1.18,0.1,1.59l20.08,17.76l-28.22,1.73c-0.83,0.05-1.46,0.76-1.41,1.59
c0.05,0.83,0.76,1.46,1.59,1.41l28.22-1.73l-14.54,16.43c-0.41,0.47-0.37,1.18,0.1,1.59c0.23,0.21,0.53,0.3,0.82,0.28
c0.29-0.02,0.57-0.15,0.78-0.38l14.54-16.43l2.03,33.12c0.05,0.83,0.76,1.46,1.59,1.41c0.83-0.05,1.46-0.76,1.41-1.59l-2.03-33.12
l20.08,17.76c0.23,0.21,0.53,0.3,0.82,0.28c0.29-0.02,0.57-0.15,0.78-0.38c0.41-0.47,0.37-1.18-0.1-1.59l-20.08-17.76l28.22-1.73
c0.83-0.05,1.46-0.76,1.41-1.59C1476.02,878.33,1475.31,877.7,1474.48,877.75z"/>
<path class="st7" d="M807.87,557.78l-28.26-0.85l15.97-15.04c0.45-0.43,0.47-1.14,0.05-1.59c-0.43-0.45-1.14-0.47-1.59-0.05
l-15.97,15.04l1-33.17c0.02-0.83-0.63-1.52-1.46-1.55c-0.83-0.02-1.52,0.63-1.55,1.46l-1,33.17l-18.38-19.52
c-0.43-0.45-1.14-0.47-1.59-0.05c-0.45,0.43-0.47,1.14-0.05,1.59l18.38,19.52l-28.26-0.85c-0.83-0.02-1.52,0.63-1.55,1.46
c-0.02,0.83,0.63,1.52,1.46,1.55l28.26,0.85l-15.97,15.04c-0.45,0.43-0.47,1.14-0.05,1.59c0.21,0.23,0.5,0.35,0.79,0.35
c0.29,0.01,0.58-0.09,0.81-0.31l15.97-15.04l-1,33.17c-0.02,0.83,0.63,1.52,1.46,1.55c0.83,0.02,1.52-0.63,1.55-1.46l1-33.17
L796.26,581c0.21,0.23,0.5,0.35,0.79,0.35c0.29,0.01,0.58-0.09,0.81-0.31c0.45-0.43,0.47-1.14,0.05-1.59l-18.38-19.52l28.26,0.85
c0.83,0.02,1.52-0.63,1.55-1.46C809.35,558.5,808.7,557.8,807.87,557.78z"/>
<path class="st7" d="M1139.38,632.94l-22.93,1.4l11.81-13.35c0.34-0.38,0.3-0.96-0.08-1.29c-0.38-0.34-0.96-0.3-1.29,0.08
l-11.81,13.35l-1.65-26.91c-0.04-0.67-0.62-1.19-1.29-1.14c-0.67,0.04-1.19,0.62-1.14,1.29l1.65,26.91l-16.31-14.43
c-0.38-0.34-0.96-0.3-1.29,0.08c-0.34,0.38-0.3,0.96,0.08,1.29l16.31,14.43l-22.93,1.4c-0.67,0.04-1.19,0.62-1.14,1.29
c0.04,0.67,0.62,1.19,1.29,1.14l22.93-1.4l-11.81,13.35c-0.34,0.38-0.3,0.96,0.08,1.29c0.19,0.17,0.43,0.24,0.66,0.23
c0.23-0.01,0.46-0.12,0.63-0.31l11.81-13.35l1.65,26.91c0.04,0.67,0.62,1.19,1.29,1.14c0.67-0.04,1.19-0.62,1.14-1.29l-1.65-26.91
l16.31,14.43c0.19,0.17,0.43,0.24,0.66,0.23s0.46-0.12,0.63-0.31c0.34-0.38,0.3-0.96-0.08-1.29l-16.31-14.43l22.93-1.4
c0.67-0.04,1.19-0.62,1.14-1.29C1140.63,633.42,1140.05,632.9,1139.38,632.94z"/>
<ellipse transform="matrix(0.6517 -0.7585 0.7585 0.6517 -200.6956 948.7015)" class="st7" cx="932.54" cy="692.86" rx="9.63" ry="9.63"/>
<path class="st7" d="M1437.92,742.69c0.24,3.12-2.1,5.84-5.22,6.08c-3.12,0.24-5.84-2.1-6.08-5.22c-0.24-3.12,2.1-5.84,5.22-6.08
C1434.97,737.23,1437.69,739.57,1437.92,742.69z"/>
<path class="st7" d="M857.85,588.78c0.24,3.12-2.1,5.84-5.22,6.08s-5.84-2.1-6.08-5.22c-0.24-3.12,2.1-5.84,5.22-6.08
C854.89,583.32,857.61,585.66,857.85,588.78z"/>
<path class="st7" d="M834.51,983.37c0.24,3.12-2.1,5.84-5.22,6.08c-3.12,0.24-5.84-2.1-6.08-5.22c-0.24-3.12,2.1-5.84,5.22-6.08
C831.56,977.91,834.28,980.25,834.51,983.37z"/>
<path class="st7" d="M1150.54,977.83c0.29,3.85-2.6,7.22-6.45,7.51c-3.85,0.29-7.22-2.6-7.51-6.45c-0.29-3.85,2.6-7.22,6.45-7.51
C1146.89,971.09,1150.25,973.98,1150.54,977.83z"/>
<path class="st7" d="M1502.54,813.83c0.29,3.85-2.6,7.22-6.45,7.51c-3.85,0.29-7.22-2.6-7.51-6.45c-0.29-3.85,2.6-7.22,6.45-7.51
C1498.89,807.09,1502.25,809.98,1502.54,813.83z"/>
<path class="st7" d="M1083.2,546.55c0.24,3.12-2.1,5.84-5.22,6.08c-3.12,0.24-5.84-2.1-6.08-5.22c-0.24-3.12,2.1-5.84,5.22-6.08
S1082.96,543.43,1083.2,546.55z"/>
<path class="st7" d="M982.47,475.62l-0.39-1.76l-0.55,3.06c-1.76,9.72-7.2,18.39-15.18,24.21h0h0c7.77,6.59,13.16,15.55,15.35,25.5
l0.39,1.76l0.55-3.06c1.76-9.72,7.2-18.39,15.18-24.21l0,0C990.05,494.53,984.66,485.57,982.47,475.62z"/>
<path class="st7" d="M1041.61,983.29c0.24,3.12-2.1,5.84-5.22,6.08c-3.12,0.24-5.84-2.1-6.08-5.22c-0.24-3.12,2.1-5.84,5.22-6.08
C1038.65,977.83,1041.37,980.17,1041.61,983.29z"/>
<ellipse transform="matrix(0.6517 -0.7585 0.7585 0.6517 -23.6571 1164.4873)" class="st7" cx="1256" cy="608" rx="5" ry="5"/>
<path class="st7" d="M1256.78,888.29l-0.42-1.91l-0.6,3.31c-1.91,10.52-7.8,19.91-16.44,26.21l0,0l0,0
c8.41,7.14,14.25,16.84,16.62,27.61l0.42,1.91l0.6-3.31c1.91-10.52,7.8-19.91,16.44-26.21l0,0
C1265,908.77,1259.16,899.07,1256.78,888.29z"/>
<path class="st7" d="M1339.86,623l0.49,2.24l0.71-3.89c2.25-12.39,9.18-23.43,19.35-30.85h0h0c-9.9-8.4-16.77-19.82-19.56-32.5
l-0.49-2.24l-0.71,3.89c-2.25,12.39-9.18,23.43-19.35,30.85l0,0C1330.2,598.91,1337.07,610.32,1339.86,623z"/>
<path class="st7" d="M1047.14,872.27l0.33,1.51l0.48-2.62c1.52-8.35,6.19-15.79,13.04-20.79l0,0l0,0
c-6.67-5.66-11.3-13.36-13.19-21.9l-0.33-1.51l-0.48,2.62c-1.52,8.35-6.19,15.79-13.04,20.79l0,0
C1040.62,856.03,1045.26,863.73,1047.14,872.27z"/>
</g>
<g id="Person">
<path class="st8" d="M574.86,1015.74c0,0-6.86,21.33-8.38,37.33c-1.52,16,12.81,32.5,12.81,32.5l8.53-62.98l-13.71-9.14"/>
<path class="st8" d="M536.76,767.35c0,0-106.67,117.76-86.86,163.05c19.81,45.29,127.24,93.61,130.29,100.71s5.33-32.9,5.33-32.9
s-83.81-65.03-86.86-79.24c-3.05-14.21,89.15-115.21,89.15-115.21L536.76,767.35z"/>
<path class="st8" d="M621.07,1527.34l-36.89-2.72l1.38,38.7c13.54-1.69,26.56-6.41,39.49-11.6
C616.69,1543.28,621.07,1527.34,621.07,1527.34z"/>
<path class="st9" d="M640.5,1556.81c-7.49,0.13-12.34-1.97-15.44-5.1c-12.93,5.19-25.94,9.91-39.49,11.6l0.94,26.35
c0,0,8.55,10.85,29.59,7.93c21.03-2.93,83.66-12.75,83.66-12.75S696.26,1555.83,640.5,1556.81z"/>
<path class="st1" d="M579.6,962.41c0,0,1.36,257.14,1.36,286.24s-2.29,282.17-2.29,282.17l44.19,3.81
c0,0,40.38-231.72,40.38-255.31s56.03-262.56,51.79-279.94S579.6,962.41,579.6,962.41z"/>
<path class="st8" d="M843.09,1525.42l-36.96,1.82l5.02,34.13c13.92-1.26,27.92-4.9,40.73-10.81
C840.09,1544.2,843.09,1525.42,843.09,1525.42z"/>
<path class="st9" d="M865.63,1552.31c-6,0.85-10.46,0.04-13.75-1.74c-12.81,5.91-26.8,9.55-40.73,10.81l4.44,30.16
c0,0,9.69,9.73,30.27,4.25s81.74-22.9,81.74-22.9S920.93,1544.51,865.63,1552.31z"/>
<path class="st9" d="M756.96,974.2c0,0,28.19,169.95,48,242.2c19.81,72.25,38.86,320.5,38.86,320.5l-41.14,9.14
c0,0-41.91-186.67-67.81-280.39c-5.73-20.74-39.14-99.97-66.06-168.33c-19.5-49.54-35.6-93.37-35.28-105.1
C634.29,964.31,756.96,974.2,756.96,974.2z"/>
<path class="st3" d="M619.11,717.68c0,0-16.03-0.89-27,7.15s-16.88,223.45-20.25,266.35s197.4,37.11,204.15,19.23
c6.75-17.88-28.64-224.8-41.3-253.41S722.06,715,674.8,709.63C627.55,704.27,619.11,717.68,619.11,717.68z"/>
<path class="st8" d="M685.29,589.68c0,0,12.29,39.52,8.45,66.1c-3.84,26.57-13.83,34.75-39.19,36.8
c-25.36,2.04-49.95-23.17-52.25-35.43c-2.31-12.27-0.77-54.51-0.77-54.51L685.29,589.68z"/>
<path class="st8" d="M625.03,688.31l1.64,34.09c0,0,50.29,3.81,56.38-12.95l-0.76-32L625.03,688.31z"/>
<path class="st9" d="M664.01,623.35c0,0-10.41-16.29-15.86-5.39c-2.65,5.29,3.99,17.04,12.4,17.04c0,0,2.3,40.88-8.42,51.79
c-10.71,10.9-32.91,7.5-36.73,7.5s-23.78-37.4-31.38-59.28c-5.83-16.8-14.92-46.34,6.2-48.38c0,0,20.95-45.51,64.63-38.7
c37.27,5.81,46.03,29.17,45.72,33.53c-0.76,10.67-26.67,18.66-26.67,37.33C673.91,624.11,664.01,623.35,664.01,623.35z"/>
<path class="st8" d="M801.65,768.93c0,0,86.24,113.24,106.35,86.57c26.69-35.39,16.53-103.85,16.53-103.85l33.49-5.77
c0,0,8.32,165.41-37.47,175.22c-59.46,12.75-160.43-109.14-160.43-109.14L801.65,768.93z"/>
<path class="st3" d="M601.46,718.65c0,0-36.51,10.6-50.22,21.27c-13.71,10.67-26.67,31.24-26.67,31.24l44.95,56.38l25.14-19.05
C594.67,808.5,615.87,749.96,601.46,718.65z"/>
<path class="st3" d="M683.05,709.45c0,0,61.72-3.81,126.48,63.24l-32.76,61.72c0,0-34.29-25.14-58.67-40.38
C693.72,778.78,673.15,732.3,683.05,709.45z"/>
<polygon class="st1" points="433.14,644.68 1024.4,758.97 1019.83,775.73 428.57,662.21 "/>
<polygon class="st1" points="331.04,718.59 422.47,742.97 473.52,575.35 376,551.73 "/>
<path class="st8" d="M925.95,763.82c0,0-1.36-20.85,2.45-27.71c3.81-6.86,7.62,2.29,11.43,0.76c3.81-1.52,7.62-2.29,9.91-0.76
c2.29,1.52,3.81,4.57,6.86,4.57s0.76-1.52,3.05,0c2.29,1.52,3.37,24.27,0.16,25.47S933.41,774,925.95,763.82z"/>
<path class="st8" d="M913.5,755.26c0,0,9.56,19.71,15.66,14.38c6.1-5.33,1.46-12.05,1.46-12.05L913.5,755.26z"/>
</g>
</svg>
--------------- UPDATE ---------------
所以我能够通过将SVG文件本身的height和width属性设置为问题来解决它,因为总体问题是(引用自Kaiido)
浏览器无法为要绘制的图像设置高度或宽度,因此无法将其渲染到画布上。 (它可以在文档中进行估算,因为它可以相对于某物,但是相对于画布而言)。
因此解决方案是在svg文件中设置绝对宽度和高度属性
谢谢!