Css SVG背景图像在：：中未在IE中显示后

我有这个SCSS代码：

.page-collapse {

  // ...

  &__title {
    // ...
    position: relative;

    &::after {
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"%3E%3Ctitle%3Eicon-plus%3C/title%3E%3Cg id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"%3E%3Cg id="modules/cards/events-ext" transform="translate(-183 -1212)" stroke="%232F2F2F" stroke-width="1.5"%3E%3Cg id="ui/plus-black2" transform="translate(184 1213)"%3E%3Cpath d="M7 .5v13m6.5-6.499H.5" id="Line"/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
      background-position: 50%;
      background-size: 100% 100%;
      content: '';
      height: 1rem;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
    }
  }
}

在铬和FF中工作良好，如图所示：

但不是在IE中：

是否IE不喜欢：：after元素中的背景图像？因为还有另一种情况，此代码覆盖引导4 alpha.6自定义复选框类：

.custom-control-input {

  &:checked {
    ~.custom-control-indicator {
      background-color: $white;
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='12' height='11' viewBox='0 0 12 11' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Styleguide' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='square'%3E%3Cg id='styles-forms' transform='translate(-333 -2181)' stroke-width='1.5' stroke='%232F2F2F'%3E%3Cg id='Group-2' transform='translate(329 2141)'%3E%3Cg id='Group'%3E%3Cpath id='icon-checkmark' d='M5 46.744L7.2 49l7.8-8'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
  }
}

这在所有的浏览器中都有效。我看到的唯一区别是第一种情况在：：after伪元素中。此外，在IEs开发工具中，相应的CSS部分被划掉：

有什么想法吗

---

编辑：我只需要支持下至IE10

尝试给出单冒号&：如前所述，IE8不支持：：

我发现了问题。。。出于某种原因，IE中似乎存在某种解析问题，并将“替换”修复了该问题，因此更改此项：

background-image: url('data:image/svg+xml;charset=utf8,%3Csvg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"%3E%3Ctitle%3Eicon-plus%3C/title%3E%3Cg id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"%3E%3Cg id="modules/cards/events-ext" transform="translate(-183 -1212)" stroke="%232F2F2F" stroke-width="1.5"%3E%3Cg id="ui/plus-black2" transform="translate(184 1213)"%3E%3Cpath d="M7 .5v13m6.5-6.499H.5" id="Line"/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');

到

---

做这项工作。。。你知道的越多。

你能试着给一个冒号&:after吗？如这里所述，IE8不支持：：嘿，谢谢你的建议。不幸的是，它不起作用。但无论如何，我只需要支持IE10：嘿，谢谢你的建议。不幸的是，它不起作用。但无论如何，我只需要支持IE10：

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Eicon-plus%3C/title%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='square'%3E%3Cg id='modules/cards/events-ext' transform='translate(-183 -1212)' stroke='%232F2F2F' stroke-width='1.5'%3E%3Cg id='ui/plus-black2' transform='translate(184 1213)'%3E%3Cpath d='M7 .5v13m6.5-6.499H.5' id='Line'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");