css - CSS:数据URL中的SVG在IE11中不起作用

我正在做这样的事情（在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>');
  }

它适用于大多数浏览器，但不适用于IE11。这是我想要达到的效果（当前活动页面的下划线）：


我已经检查过类似的帖子，例如this one here或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对于如何在数据URL中使用SVG十分挑剔。提前致谢！

最佳答案

这对我有用：

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