Firefox 또는 Chrome 72 이상에서 SVG 데이터 이미지가 작동하지 않음

Firefox 또는 Chrome 72 이상에서 SVG 데이터 이미지가 작동하지 않음

---

background-image의사 요소 로 SVG를 설정하고 있습니다 .

content: '';
position: absolute;
 right: 0;
bottom: 0;
  left: 0;
width: 100%;
height: 12px;
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 620 12" enable-background="new 0 0 620 12" xml:space="preserve"><g><polygon fill="#D11A3C" points="48.8,12 0,12 0,0 54.1,0"/><polygon fill="#952592" points="93.8,12 44,12 49.3,0 99.1,0"/><polygon fill="#1E65AF" points="133.5,12 83.7,12 89,0 138.8,0"/><polygon fill="#D11A3C" points="156.3,12 106.5,12 111.8,0 161.6,0"/><polygon fill="#40BFC2" points="201,12 151.3,12 156.5,0 206.3,0"/><polygon fill="#1E65AF" points="216.4,12 166.6,12 171.9,0 221.7,0"/><polygon fill="#952592" points="226.5,12 176.7,12 182,0 231.7,0"/><polygon fill="#1E65AF" points="241.3,12 191.5,12 196.8,0 246.6,0"/><polygon fill="#40BFC2" points="260.9,12 211.1,12 216.4,0 266.2,0"/><polygon fill="#952592" points="282.6,12 232.9,12 238.1,0 287.9,0"/><polygon fill="#952592" points="282.6,12 232.9,12 238.1,0 287.9,0"/><polygon fill="#D11A3C" points="318.6,12 268.9,12 274.2,0 323.9,0"/><polygon fill="#D11A3C" points="318.6,12 268.9,12 274.2,0 323.9,0"/><polygon fill="#40BFC2" points="364.2,12 314.4,12 319.7,0 369.5,0"/><polygon fill="#1E65AF" points="368.1,12 318.3,12 323.6,0 373.4,0"/><polygon fill="#1E65AF" points="368.1,12 318.3,12 323.6,0 373.4,0"/><polygon fill="#D11A3C" points="378.5,12 328.7,12 334,0 383.8,0"/><polygon fill="#D11A3C" points="378.5,12 328.7,12 334,0 383.8,0"/><polygon fill="#40BFC2" points="424.8,12 375,12 380.3,0 430.1,0"/><polygon fill="#40BFC2" points="424.8,12 375,12 380.3,0 430.1,0"/><polygon fill="#952592" points="430.1,12 380.3,12 385.6,0 435.4,0"/><polygon fill="#1E65AF" points="465.6,12 415.8,12 421.1,0 470.9,0"/><polygon fill="#D11A3C" points="488.3,12 438.5,12 443.8,0 493.6,0"/><polygon fill="#D11A3C" points="620,12 613.4,12 618.7,0 620,0"/><polygon fill="#40BFC2" points="534.2,12 484.5,12 489.8,0 539.5,0"/><polygon fill="#1E65AF" points="548,12 498.2,12 503.5,0 553.3,0"/><polygon fill="#952592" points="556.5,12 506.7,12 512,0 561.8,0"/><polygon fill="#1E65AF" points="573.8,12 524.1,12 529.4,0 579.1,0"/><polygon fill="#40BFC2" points="592.5,12 542.8,12 548.1,0 597.8,0"/><polygon fill="#952592" points="614.4,12 564.6,12 569.9,0 619.7,0"/></g></svg>');
background-repeat: repeat-x;
background-position: bottom;

그러나 어떤 이유로 Firefox에는 표시되지 않습니다. base64 데이터 URL을 사용하고 싶지 않습니다. Firefox에서 전혀 가능하지 않습니까?

---

URL의 # 문자는 부분 식별자 의 시작을 나타 내기 위해 예약되어 있습니다.

데이터 URL 콘텐츠를 URL 인코딩해야합니다. 즉, 데이터 URL의 해시 문자를 % 23으로 변환해야합니다.

---

encodeURIComponent(uri)JS 의 기능을 사용할 수 있습니다 .

이 함수는 특수 문자를 인코딩하고 다음 문자도 인코딩 할 수 있습니다. , / ? : @ & = + $ #

참조 : https://www.w3schools.com/jsref/jsref_encodeuricomponent.asp

---

sass 변수 (예 : 채우기 용)와 함께 url을 사용하려고 할 때이 인코딩 문제가있는 사람에게는 다음이 매우 유용합니다. https://gist.github.com/JacobDB/0ffffaf8e772c12acf7102edb8a302be

참고, 필요에 따라 inline-svg에서 출력 URL을 편집해야 할 수도 있습니다 (제 경우에는 data:image/svg+xml;utf8대신 사용 했습니다).

참조 URL : https://stackoverflow.com/questions/30733607/svg-data-image-not-working-on-firefox-or-chrome-72