Question

关于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的小提琴：

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

在Firefox和Chrome中运行小提琴可以正确显示分组天数，但Internet Explorer 9,10（11？）不会显示分割天数。

我已经查看了类似的问题，例如以下但尚未找到任何明确的解决方案：

SVG background image in IE9
Inline SVG not working as background-image in IE

任何人都有使用Internet Explorer来显示内联SVG作为背景的经验，或者看到一些我忽略的东西，或者我正在以错误的方式接近它。谢谢！

Answer 1

如果您对数据进行base64编码，则IE可以正常工作，例如

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

Answer 2

不幸的是，您需要对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/

SVG内联CSS无法在Internet Explorer中显示

2 个答案: