SVG内联CSS不在Internet Explorer中显示 [英] SVG inline CSS not displaying in internet explorer

问题描述

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

日历首先用javascript和事件是通过向来自JSON数据的目标单元格添加css类来放置的。

下面是一个用于应用背景的CSS类的小片段，完整示例与HTML中的小提琴：

  .calendar td {
 position：relative; 
} 
 
 .calendar .split {
 background-repeat：no-repeat; 
背景位置：左上角; 
背景大小：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''style ='stroke-width：0; fill：lightgreen;'/> ;< / svg>）;} 
  

这里是包含HTML和CSS的小提琴，问题：

• http://jsfiddle.net/0mspvexg/2/

在Firefox和chrome中运行小提琴显示拆分日期正确，但Internet Explorer 9，10，（11？）不显示拆分天。

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

1. IE9中的SVG背景图片


2. 内联SVG不能用作IE中的背景图像

任何人都有获得Internet Explorer显示内联SVG作为背景的经验，或者看到明显的我忽略的东西，或者我正在接近这个错误办法。谢谢！

解决方案

如果你base64编码数据，IE浏览器工作，例如

  .calendar .split.pm_mgmt {背景图像：URL（ 数据：图像/ SVG + xml的;字符集= UTF8; BASE64，PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxIDEnICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48cG9seWdvbiBwb2ludHM9JzEsMSAxLDAgMCwxJyBzdHlsZT0nc3Ryb2tlLXdpZHRoOjA7IGZpbGw6ZG9kZ2VyYmx1ZTsnIC8 + PC9zdmc +）;} 
  

First question on stackoverflow, hope it's not too boneheaded. I've been trying to figure out a way to display a calendar with split event days. What I came up with was using an SVG graphic placed with inline css as a background for the specific calendar table cell in order to split days that have a split. It works wonderfully in Firefox and Chrome but the graphics do not display in Internet explorer (I've tried 9 and 10 but not 11).

The calendar is first generated with javascript and events are placed by adding css classes to targeted cells from JSON data.

Here is a small snip of the a CSS classes being used to apply the background, full example with the HTML in the 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>");}

Here is the fiddle containing the HTML and CSS that illustrates the issue:

• http://jsfiddle.net/0mspvexg/2/

Running the fiddle in Firefox and chrome shows the split days properly but Internet explorer 9, 10, (11?) does not display the split days.

I have looked at similar questions such as the following but have not yet found any clear solutions:

1. SVG background image in IE9
2. Inline SVG not working as background-image in IE

Anyone have any experience with getting Internet explorer to display inline SVG as a background or see something obvious I'm overlooking or maybe I'm approaching this the wrong way. Thanks!

解决方案

IE works if you base64 encode the data e.g.

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

这篇关于SVG内联CSS不在Internet Explorer中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！