在Internet Explorer中不显示SVG内联CSS

关于stackoverflow的第一个问题，希望不要太过于头脑。我一直在试图找出一种方法来显示分割活动日期的日历。我想到的是使用内联CSS放置的SVG图形作为特定日历表单元格的背景，以拆分具有分割的日子。它在Firefox和Chrome中运行得非常好，但图形不能在Internet Explorer中显示（我试过9和10但不是11）。在Internet Explorer中不显示SVG内联CSS

日历首先用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的小提琴和镀铬显示正常分裂天，但实习生et explorer 9，10，（11？）不显示拆分日期。

我已经看过类似的问题，比如下面的，但尚未发现任何明确的解决方案：

任何有越来越Internet Explorer显示任何经验内联SVG作为背景，或者看到我忽略的东西，或者我正在接近这个错误的方式。谢谢！

来源

2014-12-05 Ryan McArthur

如果你base64编码数据，

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

来源

2014-12-05 18:11:20

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

来源

2015-04-02 15:15:45

在Internet Explorer中不显示SVG内联CSS

回答

相关问题