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，然后显示：block，希望强制重新呈现元素。这没有用。我销毁元素，然后重建它并将其附加回应该去的地方。那没用。

为了让事情变得更加混乱，我无法在本地复制问题。它只会在某些环境中出现，让我相信它是浏览器和某些服务器设置的组合。我不知道是什么。

无论如何，重点是IE非常有弹性，不会重新呈现它呈现的内容。由于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事件更改外观而不是更改类时，使用XML-ifed SVG图像数据分配内嵌CSS样式，但略有不同。一切都会奏效。我用了一个额外的空间。

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

重申一下，这是在页面加载时发生的SVG渲染问题。您可以通过在线提供略有不同的数据来强制SVG重新渲染图像。我想你可以用一个第三个类做同样的事情，它包含对初始版本略有不同的SVG文件的引用，但我没有这样做。

Answer 2

确保SVG文件具有width和height属性。

如果有“响应”的话。在其中的选项，你应该删除它。

该选项可重置CSS宽度和高度。

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

2 个答案: