Internet Explorer 11에서 인라인 SVG 배경이 작동하지 않습니다.

Question

다음 인라인 SVG가 내 CSS의 배경 이미지로 정의되어 있습니다.

div { 
    border: 1px solid black; 
    background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M2 10 L8 0 L10 0 L10 10' fill='%238A92DF'></path></svg>"); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: 100%; 
} 

Chrome, Firefox 및 Edge에서는 제대로 작동하지만 Internet Explorer 11에서는 실패합니다. 왜 그렇습니까?

JSfiddle here.

Answer 1

당신은 당신의 SVG를 인코딩 전체 URL에 있습니다.

당신이 VSCode을 사용하는 경우 "URL 인코딩"라는 확장자가 그 ... 당신을 위해이 작업을 수행 할 수 있습니다 또는 당신은 쉽게 하나 개의 온라인 찾을 수 있습니다 나는 또한 제거했습니다 https://meyerweb.com/eric/tools/dencoder/

주 "버전"속성과 "; 문자셋 = UTF8"부분, 필요한 경우 확실하지만, 물건을 정리하지 ...

div { 
 
    border: 1px solid black; 
 
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2010%2010'%3E%3Cpath%20d%3D'M2%2010%20L8%200%20L10%200%20L10%2010'%20fill%3D'%238A92DF'%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: 100%; 
 
    width: 500px; 
 
    height: 500px; 
 
}

<div></div>