html - SVG 内联 CSS 不显示在 Internet Explorer 中

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 的 fiddle :

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

在 Firefox 和 chrome 中运行 fiddle 可以正确显示拆分日期，但 Internet Explorer 9、10、(11？)不显示拆分日期。

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

1. SVG background image in IE9
2. 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+");}