在IE中没有显示的SVG背景图像

Question

我有这个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;
    }
  }
}

Chrome和FF的工作正常，如下所示：

但不是在IE中：

可能是，IE不喜欢:: after-Elements中的背景图片？因为还有另一种情况，使用此代码（覆盖Bootstraps（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伪元素中。此外，在IE开发工具中，相应的CSS部分被划掉：

有什么想法吗？

编辑：我只需要支持IE10

Answer 1

我发现了问题......出于某种原因，在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');

到

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");

完成了这项工作......你知道的越多。

Answer 2

尝试提供单个冒号＆amp;：之后here IE8不支持 ::