IE在伪元素：before或：after中未将SVG显示为内容

Question

此问题是以下线程的扩展。 Is there a way to use SVG as content in a pseudo element :before or :after。

我正在尝试使用伪类在div后面附加一个svg三角形。

div{
background-color: black;
width: 48px;
height: 45px;
}

div::before{
content: url('data:image/svg+xml; utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="266.53926701570674 152.66492146596858 44 44"><defs><path d="M267.54 153.66L307.54 193.66L267.54 193.66L267.54 153.66Z" id="d6AN4MEUYO"></path></defs><g><g><use xlink:href="#d6AN4MEUYO" opacity="1" fill="red" fill-opacity="1"></use></g></g></svg>');
right: -47px;
position: relative;

}

<div></div>

上面的代码在chrome中运行良好，但是对于IE来说，它并没有加载svg内容。

我也尝试过使用background-image属性，但是在IE（版本> 10）中似乎不起作用。

用伪类将svg附加为内容的正确方法是什么？

Answer 1

我已经使用IE 11对其进行了测试，并且能够产生此问题。看来伪元素内容属性当前不适用于SVG元素。这可能是某种错误，或者是IE浏览器的默认行为。我将尝试提交有关此问题的反馈。

作为解决方法，建议您使用background-image属性显示svg内容，如下所示：

In [159]: df
Out[159]:
           Date         new
0   27 Feb 1928  1928-02-27
1          1920  1920-01-01
2  October 2000  2000-10-01
3          1500  1500-01-01
4          1625  1625-01-01
5      Mar 1723  1723-03-01

In [160]: df.dtypes
Out[160]:
Date       object
new     period[D]
dtype: object

In [161]: df["new"].dt.year
Out[161]:
0    1928
1    1920
2    2000
3    1500
4    1625
5    1723
Name: new, dtype: int64

在IE 11浏览器中的结果如下：

编辑：

  

我无法将svg与background-image属性一起使用，而   您的svg正在加载该媒体资源。我的有什么问题吗   svg？

当我们使用具有背景图像属性的SVG时，应确保对reserved URL characters进行编码（例如<style> .div1:after { content: ''; display: block; height: 80px; width: 80px; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E); } </style> <div class="div1" style="background-color:green; width:80px;height:80px"></div> === <和%3C === {{ 1}}），并用'％20'替换空格。

因此，请对您的svg元素进行如下编码：

>

然后，结果如下：