Geek Answers Handbook

Inline CSS SVG not displaying in Internet Explorer

First question about stackoverflow overflow, hope this is not too annoying. I tried to figure out a way to display a calendar with days of broken events. I came up with using SVG graphics with built-in css as the background for a specific cell in the calendar table to separate the days with the split. It works fine in Firefox and Chrome, but the graphics do not appear in Internet Explorer (I tried 9 and 10, but not 11).

The calendar is first created using javascript, and events are placed by adding css classes to the target cells from JSON data.

Here is a small snippet of CSS classes used to apply the background, a complete example with HTML in a script:

    .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>");}

Here is a fiddle containing HTML and CSS that illustrates the problem:

Firefox chrome , Internet Explorer 9, 10, (11?) .

, , :

, Internet Explorer SVG - , , , , . !

+4
2

IE , base64 , .

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

, Internet Explorer URI ( base64).

URI SVG, .

.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://pressbin.com/tools/urlencode_urldecode/ encodeURIComponent().

Compass, base64: http://keegan.st/2012/09/14/easy-image-data-uris-with-compass/

+4

More articles:


All Articles