在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

回答

相關問題