CSS：数据 URL 中的 SVG 在 IE11 中不起作用

Question

我正在做这样的事情（在 React 应用程序中，使用样式化组件）：

a {
    position: relative;
  }

  a::after {
    content: '';
    position: absolute;
    bottom: -10px;
    display: block;
    height: 8px;
    width: 100%;
    transform: rotate(180deg);
    background: 0 center repeat-x
      url('data:image/svg+xml;utf-8,<?xml version="1.0" encoding="UTF-8"?>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="8px" viewBox="0 0 9 6" enable-background="new 0 0 9 6" xml:space="preserve">
        <polygon stroke="${encodeURIComponent(
          c_NAV_ACTIVE
        )}" points="4.5,4.5 0,0 0,1.208 4.5,5.708 9,1.208 9,0 "/>
    </svg>');
  }

它适用于大多数浏览器但不适用于IE 11。这是我试图实现的效果（当前活动页面的下划线）：

我已经查看过类似的帖子，例如 or this article。我修改了我的 background 属性使 HTML 编码如下：

background: 0 center repeat-x
      url("data:image/svg+xml;charset=UTF-8,%3C?xml version='1.0' encoding='UTF-8'?%3E
    %3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='100%' height='8px' viewBox='0 0 9 6' enable-background='new 0 0 9 6' xml:space='preserve'%3E
        %3Cpolygon stroke='${encodeURIComponent(
          c_NAV_ACTIVE
)}' points='4.5,4.5 0,0 0,1.208 4.5,5.708 9,1.208 9,0 '/%3E
    %3C/svg%3E");

它在 IE 11 中仍然不起作用。有什么想法吗？如果我用原始颜色替换 background 的值，比如 red，下划线就在那里。显然，IE 对我在数据中使用 SVG 的方式很挑剔 URL。提前致谢！

Answer 1

这对我有用：

background-position-x: 0;
background-position-y: center;
background-repeat: repeat-x;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='100%25' height='8px' viewBox='0 0 9 6' enable-background='new 0 0 9 6' xml:space='preserve'%3e%3cpolygon stroke='%23fb37f1' points='4.5,4.5 0,0 0,1.208 4.5,5.708 9,1.208 9,0 '/%3e%3c/svg%3e");
background-size: 12px 12px;

我用了这个编码器https://codepen.io/elliz/pen/ygvgay

CSS：数据 URL 中的 SVG 在 IE11 中不起作用

CSS: SVGs in data URL not working in IE11

css

svg

internet-explorer-11