Rya*_*hur 5 html css internet-explorer svg internet-explorer-10
关于stackoverflow的第一个问题,希望它不是太愚蠢.我一直试图想出一种方法来显示具有拆分事件日的日历.我想到的是使用内嵌css放置的SVG图形作为特定日历表格单元格的背景,以便分割具有拆分的日期.它在Firefox和Chrome中运行得非常好,但是图形不会显示在Internet Explorer中(我已经尝试过9和10但不是11).
首先使用javascript生成日历,并通过将css类添加到来自JSON数据的目标单元格来放置事件.
下面是一个用于应用背景的CSS类的小片段,完整的示例包含小提琴中的HTML:
.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的小提琴,用于说明问题:
在Firefox和Chrome中运行小提琴会正确显示分割日,但Internet Explorer 9,10(11？)不会显示分割天数.
我已经查看了类似的问题,如下所示,但尚未找到任何明确的解决方案:
任何人都有任何使用Internet Explorer以显示内联SVG作为背景的经验,或者看到一些我忽略的东西,或者我正在以错误的方式接近它.谢谢!
如果你base64编码数据,IE工作
.calendar .split.pm_mgmt{ background-image: url("data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxIDEnICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48cG9seWdvbiBwb2ludHM9JzEsMSAxLDAgMCwxJyBzdHlsZT0nc3Ryb2tlLXdpZHRoOjA7IGZpbGw6ZG9kZ2VyYmx1ZTsnIC8+PC9zdmc+");}
不幸的是,您需要为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/