Question

在Mozilla浏览器中没有在画布中加载SVG图像，但保存代码在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;

这是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>

提前致谢

Answer 1

你有两个不同的问题。

根<svg>元素需要显式的宽度和高度属性，而不是百分比
＃字符是网址中的保留字符，必须以％23

目前还不清楚无限画布显示无限大小的形状会发生什么，因此Firefox目前不支持此功能。如果w3c明确定义了应该发生什么，那么就可以实现。我不确定Chrome在这种情况下做了什么。
是Chrome的错误。在这种情况下，它可能会给你你想要的东西，但根据适当的规格，它仍然是错误的。

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

1 个答案: