IE 不将 SVG 显示为伪元素中的内容 :before 或 :after

Posted 2023-03-06

【中文标题】IE 不将 SVG 显示为伪元素中的内容 :before 或 :after

【英文标题】：IE not displaying SVG as content in a pseudo element :before or :after

【发布时间】：2019-11-25 02:31:04

【问题描述】：

这个问题是下面线程的扩展。 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 附加为带有伪类的内容的正确方法是什么？

【问题讨论】：

哪个版本的IE？此外，它在 Chrome 中的 sn-p 中也不起作用。

注意 IE9-Edge12, Safari 5.1-6, and UCWeb 11 do not support referencing external files via <use xlink:href>... 只需使用常规 svg 即可，还可以指定高度、宽度...检查caniuse。

@Paulie_D 我使用的是 IE 版本 11

与答案无关，但伪元素应该用双冒号.class::after而不是单冒号.class:after来标记。伪类用单冒号标记。来源developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#Syntax

【参考方案1】：

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

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

<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>

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

编辑：

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

当我们使用带有 background-image 属性的 SVG 时，我们应该确保对 reserved URL characters 进行编码（例如 < === %3C 和 > === %3E）并将空格替换为'%20'。

所以，请将您的 svg 元素编码如下：

background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%22266.53926701570674%20152.66492146596858%2044%2044%22%3E%3Cdefs%3E%3Cpath%20d%3D%22M267.54%20153.66L307.54%20193.66L267.54%20193.66L267.54%20153.66Z%22%20id%3D%22d6AN4MEUYO%22%3E%3C%2Fpath%3E%3C%2Fdefs%3E%3Cg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23d6AN4MEUYO%22%20opacity%3D%221%22%20fill%3D%22red%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E);

然后，结果如下：

【讨论】：

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

@Onera，请检查编辑以编码 svg 元素。

我使用yoksel.github.io/url-encoder链接来编码svg。谢谢