SVG 内联 CSS 未在 Internet Explorer 中显示

Posted 2023-03-06

【中文标题】SVG 内联 CSS 未在 Internet Explorer 中显示

【英文标题】：SVG inline CSS not displaying in internet explorer

【发布时间】：2015-02-03 22:10:36

【问题描述】：

关于***的第一个问题，希望它不是太愚蠢。我一直在尝试找出一种方法来显示带有拆分事件日的日历。我想出的是使用带有内联 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?) 不显示拆分天数。

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

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

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

【参考方案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/