【发布时间】：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
标签： css internet-explorer svg internet-explorer-11