SVG 内联 CSS 未在 Internet Explorer 中显示答案

【问题标题】：SVG inline CSS not displaying in internet explorerSVG 内联 CSS 未在 Internet Explorer 中显示
【发布时间】：2015-02-03 22:10:36
【问题描述】：

关于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 中运行 fiddle 可以正确显示拆分天数，但 Internet Explorer 9、10、(11?) 不显示拆分天数。

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

任何人都有过让 Internet Explorer 将内联 SVG 显示为背景的经验，或者看到一些明显我忽略的东西，或者我可能以错误的方式处理这个问题。谢谢！

【问题讨论】：

标签： html css internet-explorer svg internet-explorer-10

【解决方案1】：

如果你对数据进行 base64 编码，IE 就可以工作，例如

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

【讨论】：

IE11 在我的测试中需要“charset”键指定。在我提供完整的“charset=utf8”之前，简单的“utf8”并没有为我做这件事。供传统支持人员参考

【解决方案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/

【讨论】：