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

Question

这是我在stackoverflow上的第一个问题，希望它不会太蠢。 我一直在尝试找到一种方法来显示具有分裂事件日期的日历。 我想到的方法是使用SVG图形放置在具体的日历表格单元格中作为内联CSS的背景，以便于拆分具有分裂日的日期。 它在Firefox和Chrome中运行得非常好，但图形无法在Internet Explorer中显示（我尝试过9和10但没有11）。

该日历首先由JavaScript生成，然后通过向JSON数据中的目标单元格添加CSS类来放置事件。

以下是应用背景使用的CSS类的简短代码段，完整的示例与HTML在"fiddle"中：

    .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中运行fiddle可以正确显示分割的日历，但是Internet Explorer 9、10 (11?)无法显示分割的日历。
我查看了类似的问题，例如下面这些链接，但是还没有找到明确的解决方案：

1. SVG背景图片在IE9中无法显示
2. 内联SVG在IE中无法作为背景图片显示

请问谁有在Internet Explorer中显示内联SVG作为背景图片的经验，或者有什么重要的事情我忽略了，也可能是我的方法不对。谢谢！

- Ryan McArthur

Answer 1

如果使用base64编码数据，IE可以正常工作。

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

- Robert Longson

---

在我的测试中，IE11需要“charset”关键字的指定。仅使用“utf8”对我来说不起作用，直到我提供了完整的“charset=utf8”。对于支持旧版浏览器的人们，这是一个提示。 - Sterling Beason

Answer 2

不幸的是，您需要使用URI编码（或base64）才能在Internet Explorer中使用。

使用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/

- Ben Besuijen