html - 在类更新时，CSS 中作为背景的 SVG 图像不会出现在 IE11 中

Question

问题:在页面加载时，对于一个按钮，会出现在 CSS 后台调用的 SVG。在某些情况下，我应用一个类并在 CSS 背景中调用另一个 SVG。但是，新的 SVG 没有出现。如果在调试器中，我尝试切换背景，它就会开始出现。

我缺少什么才能在 IE11 中运行它？

在下图中，我们使用 <button>标签。在某些事件中，背景 SVG 会发生变化。

CSS 代码

.buttonIcons{
 .svgicon-fields-add{ background-image:url('../assets/themes/svg/arrow_active.svg');
 width: 16px;
 height: 16px; 
}

在禁用状态下，下面是CSS

.buttonIcons.disabled{
 .svgicon-fields-add{ background-image:url('../assets/themes/svg/arrow_disabled.svg');
  width: 16px;
  height: 16px; 
}

所以最初所有按钮都被禁用，但是如果您看到第一个按钮需要显示事件的 svg 图像，但它没有出现。我可以在 IE11 控制台中看到它，如果在控制台中，我切换属性，它就会开始出现。

代码在 Chrome 中运行良好

提前感谢所有建议。

SVG文件代码

<?xml version="1.0" encoding="utf-8"?>
<svg width="16" height="16" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<g>
    <polygon fill="#00a6a0" points="7.6,1.6 6.7,2.4 12.3,8 6.7,13.6 7.6,14.4 14,8   "/>
    <polygon fill="#00a6a0" points="2.6,1.6 1.7,2.4 7.3,8 1.7,13.6 2.6,14.4 9,8     "/>
</g>
</svg>

Answer 1

基于少量的观看次数，这是一个深奥的案例，但我遇到了同样的问题。我已经研究了好几天了。我还有一个双重问题，即在开发人员工具中切换样式时，IE 不会显示背景。

我认为这最初是一个内存问题，IE 正在为图标分配内存但实际上并没有在其中放置任何东西。

所以我直接在类本身中将 SVG 作为 xml 编码的字符串应用。这解决了 SVG 背景未出现的一个实例，但没有解决此处提到的问题。此外，这让我看到了您提到的切换事件。

所以我现在认为这不是内存问题，而是 IE10/11 的 SVG 渲染引擎的问题。这个问题只发生在某些 SVG 上这一事实强化了 IE 渲染引擎正在使用某些输入来破坏床的想法。它也只会在 CSS SVG 背景被另一个类的 SVG 背景覆盖时发生。

因此，我尝试将对象设置为 display:none，然后设置为 display:block，希望强制重新渲染该元素。这没有帮助。我销毁了 元素，然后重建它并将它追加到它应该去的地方。那没有用。

让事情变得更加困惑的是，我始终无法在本地重现该问题。它只会在某些环境中出现，让我相信它是浏览器和某些服务器设置的组合。我不知道是什么。

无论如何，关键是 IE 非常有 flex ，它不会重新呈现已呈现的内容。并且由于 SVG 引擎显然与 DOM 渲染引擎是分开的，因此随意修改 DOM 不会影响 SVG 渲染器存储的内容。您必须为其提供可量化的不同数据，以强制 SVG 引擎重新渲染。

我找到的唯一解决方案是让我的两个 CSS 类为 IE 提供与页面加载时发现的不同的图像数据。

.Class1 {
   background-image: url("data:image/svg+xml,image-data...");
}
.Class2 {
   background-image: url("data:image/svg+xml,image-data...");
}

这些类允许覆盖默认页面加载状态。然后当 JS 事件改变外观时，而不是改变类，分配一个内联 CSS 样式与 XML 化的 SVG 图像数据略有不同。任何事情都会奏效。我使用了额外的空间。

onclick="function(){
   element.style.backgroundImage = "url(\"data:image/svg+xml,slightly-different-data...\")"
}

重申一下，这是页面加载时发生的 SVG 渲染问题。您可以通过为图像提供稍微不同的内联数据来强制 SVG 重新渲染图像。我想您可以对包含对与初始文件略有不同的 SVG 文件的引用的第三类执行相同的操作，但我没有这样做。