Javascript 未在Mozilla浏览器的画布中加载SVG图像

SVG图像没有加载到Mozilla浏览器的画布中，但保存代码在Chrome中运行良好。 我在这里附上了我的代码。请检查并让我知道解决方案

var canvasProduct = document.getElementById('canvas');
var ctxProduct = canvasProduct.getContext('2d');    
var newproductSvg = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.11 205.65">.....</svg>
    var imageObj = new Image();    
    imageObj.onload = function() {
                ctxProduct.drawImage(imageObj,0,0,100,100);
                console.log("Shadow image loaded");
            }
    imageObj.src = "data:image/svg+xml;charset=utf-8,"+newproductSvg;

var canvasProduct=document.getElementById（'canvas'）； var ctxProduct=canvasProduct.getContext（'2d'）； var newproductSvg='。。。。。 var imageObj=新图像（）； imageObj.onload=函数（）{ ctxProduct.drawImage（imageObj，0,0100）； log（“加载阴影图像”）； } imageObj.src=“data:image/svg+xml；charset=utf-8，”+newproductSvg； 以下是svg数据：

<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 376.94">
                                                <defs>
                                                    <style>
                                                    .cls-2 {
                                                        fill: #1e73be;
                                                    }
                                                    </style>
                                                </defs>
                                                <title>crewNeck Tshirt</title>
                                                <path class="cls-2" d="M80.16,372.86c1.81-21.51,2.63-43.09,3.14-64.65.37-15.66,1.46-31.28,1.73-47,.45-25.59.13-51.24,2.52-76.78.52-5.58.92-11.19,1.12-16.79a30.28,30.28,0,0,1,6.09-17.16c2.05-2.82.26-5.66-.38-8.17s-3.29-.81-4.88-.34c-15.57,4.57-32,5-47.42,10.4-2.09.73-4.12,1.16-5.62-1.35-11.8-19.69-25.69-38.14-34.94-59.32-.4-.92-.74-1.86-1.06-2.81-1-2.91-.56-4.75,2.59-6.55,6.25-3.56,12.2-7.58,19.56-8.52a3.87,3.87,0,0,0,1.55-.61c16.7-10.87,34.36-20,51.69-29.81,18.15-10.23,38-15.12,57.74-20.57,9.94-2.75,19.78-5.88,29.64-8.94,1.42-.44,2.69-.84,4.15-.29C187,21,206.46,20.18,225.81,12.57c2-.79,4-1.58,6.24-.54,11.9,5.61,24.74,7.88,37.51,10.25,22.42,4.16,43.69,11.66,64.41,21,7.05,3.18,14.84,5.06,21.33,9.07,13,8,28.47,8.4,41.91,14.78,2.75,1.3,3.43,2.26,2.22,5.27a375,375,0,0,1-18.94,40.94A219.55,219.55,0,0,0,369,137.41c-1.45,3.6-3.06,5.28-7.38,5.16-13.64-.38-27.29,1-41,.22-4.16-.23-8.27-1-12.48-.72-1.68.13-2.14.87-3.06,2.13-3.18,4.34-3.09,8.82-3.22,14.06-.34,14.66,3.28,28.78,4.25,43.22,1.38,20.52,3.69,41,4.91,61.5,1,17.65,3,35.25,3.83,52.92,1,21,1.87,42,1.58,63,0,2.58-.68,3.67-3.46,3.3-11.82-1.6-23.57.13-35.23,1.47-34.8,4-69.61,6.29-104.63,3.75-20.8-1.51-41.49-4.36-62.34-5-8.91-.29-17.85-.16-26.77,0-3.26.05-4.93-.57-4-4.32C80.51,376.4,80.16,374.58,80.16,372.86Z" transform="translate(0 -11.53)" />
                                            </svg>

.cls-2{
填充：#1e73be；
}
圆领T恤

---

提前感谢

您有两个不同的问题

根

元素需要非百分比的显式宽度和高度属性

#字符是URL中的保留字符，必须作为%23转义

---

目前还不清楚无限画布显示无限大小的形状会发生什么，因此Firefox目前不支持这种情况。如果w3c对应该发生的事情提供了一个清晰的定义，那么它就可以实现。我不确定Chrome在这种情况下做了什么

是一个Chrome bug。在这种情况下，它可能会给你你想要的，但根据适当的规范，它仍然是错误的

---

你有两个不同的问题

根

元素需要非百分比的显式宽度和高度属性

#字符是URL中的保留字符，必须作为%23转义

---

目前还不清楚无限画布显示无限大小的形状会发生什么，因此Firefox目前不支持这种情况。如果w3c对应该发生的事情提供了一个清晰的定义，那么它就可以实现。我不确定Chrome在这种情况下做了什么

是一个Chrome bug。在这种情况下，它可能会给你你想要的，但根据适当的规范，它仍然是错误的

---

这里我附上了我的一个svg示例代码：@RobertLongson你能检查一下我的svg示例吗？@RobertLongson:事实上我只是在我的帖子中加了一些点。请查看完整svg数据的屏幕截图。试试这个，贴一张SVG代码的图片是愚蠢的。请把它贴在你的问题里。或者更好的是，创建一个。这里我附上了我的一个svg示例代码：@RobertLongson你能检查一下我的svg示例吗？@RobertLongson:实际上我只是在我的帖子中加了一些点。请查看完整svg数据的屏幕截图。试试这个，贴一张SVG代码的图片是愚蠢的。请把它贴在你的问题里。或者更好的是，创建一个。