SVG 인라인 CSS가 인터넷 익스플로러에 표시되지 않음

첫 번째 질문은 stackoverflow, 그것이 너무 지나치지 않을 바랍니다. 나는 분할 이벤트 일을 가진 달력을 표시하는 방법을 계산하려고 노력했습니다. 필자가 생각해 낸 것은 SVG 그래픽을 인라인 CSS로 배치하여 특정 캘린더 테이블 셀의 배경으로 사용하여 분할 된 날짜를 분리하는 것이 었습니다. Firefox와 Chrome에서 멋지게 작동하지만 인터넷 익스플로러에서는 그래픽이 표시되지 않습니다 (저는 9와 10을 시도했지만 11은 아니 었습니다).SVG 인라인 CSS가 인터넷 익스플로러에 표시되지 않음

먼저 달력이 자바 스크립트로 생성되고 이벤트는 JSON 데이터의 대상 셀에 CSS 클래스를 추가하여 배치됩니다. 여기

.calendar td { 
     position:relative; 
    } 

    .calendar .split { 
     background-repeat:no-repeat; 
     background-position: top left; 
     background-size: 100% 100%; 
    } 
    .calendar .split.am_vaca{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><polygon points='0,0 1,0 0,1' style='stroke-width:0; fill:lightgreen;' /></svg>");}

문제를 예시 HTML과 CSS를 포함하는 바이올린입니다 : 여기

은 CSS의 클래스의 작은 싹둑는 바이올린의 HTML과 배경, 전체 예를 적용하는 데 사용되는 :

http://jsfiddle.net/0mspvexg/2/

파이어 폭스에서 바이올린을 실행하고 크롬 분할 일이 제대로 표시하지만 인턴 et explorer 9, 10, (11?)은 분할 일을 표시하지 않습니다.

나는 그런 다음 아직 발견되지 않은 명확한 솔루션으로 비슷한 질문을 살펴 보았다 :

사람은 표시 할 인터넷 익스플로러를 받고 어떤 경험을 가지고 인라인 SVG를 배경으로 사용하거나 명백한 것을 보아라. 내가 간과하고 있거나 어쩌면 나는 잘못된 방향으로 접근하고있다. 감사!

출처

2014-12-05 Ryan McArthur

IE는 base64로 데이터를 인코딩하면 작동합니다.

.calendar .split.pm_mgmt{ background-image: url("data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxIDEnICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48cG9seWdvbiBwb2ludHM9JzEsMSAxLDAgMCwxJyBzdHlsZT0nc3Ryb2tlLXdpZHRoOjA7IGZpbGw6ZG9kZ2VyYmx1ZTsnIC8+PC9zdmc+");}

출처

2014-12-05 18:11:20

불행히도 Internet Explorer에는 URI 인코딩 (또는 base64)을 사용해야합니다.

URI 인코딩을 사용하면 SVG 값을 변경할 가능성이 있지만 읽기가 어렵습니다. http://pressbin.com/tools/urlencode_urldecode/ 을 그리고에 encodeURIComponent() 옵션을 선택합니다

.calendar .split.am_vaca { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%20%20preserveAspectRatio%3D'none'%3E%3Cpolygon%20points%3D'0%2C0%201%2C0%200%2C1'%20style%3D'stroke-width%3A0%3B%20fill%3Alightgreen%3B'%20%2F%3E%3C%2Fsvg%3E"); }

당신은 여기 SVG를 인코딩 할 수 있습니다. http://keegan.st/2012/09/14/easy-image-data-uris-with-compass/

: 당신이 나침반을 사용하는 경우

당신은 base64 인코딩을 자동화 할 수 있습니다

출처

2015-04-02 15:15:45

SVG 인라인 CSS가 인터넷 익스플로러에 표시되지 않음

답변

관련 문제