SVG-изображение не загружается в холст в браузере Mozilla

Question

Изображение 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; 

Вот 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

вы две отдельные проблемы.

1. корень <svg> элемент нуждается в явном атрибуты ширину и высоту, которые не являются проценты
2. символ # является зарезервированным символ в URL и должны быть экранированы, как% 23

---

1. Непонятно, что должно произойти с бесконечным холстом, отображающим бесконечно размерную форму, поэтому Firefox в настоящее время не поддерживает это. Если w3c предоставил четкое определение того, что должно произойти, оно может быть реализовано. Я не уверен, что делает Chrome в этом случае.

2. Является ошибкой Chrome. Это может дать вам то, что вы хотите в этом случае, но оно по-прежнему не соответствует требованиям.