Question

我有HTML页面，我在这里渲染SVG，并且在现代浏览器和IE9 +中都可以正常工作。 IE8然而不显示svg，我看到的只是空盒子。我试图让IE8和旧版浏览器根本不渲染它，但通常display: none;，width: 0等所有尝试都失败了。我试图通过JS调用隐藏它，但似乎没有任何工作。如果我直接在HTML中更改宽度/高度，它似乎工作。我的SVG部分在下面，如果有人可以告诉我如何让IE不显示这个SVG标签会很棒。

<div class="slide panel">

<svg width="1000" height="500">
    <mask  width="1000" height="500"  maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" id="m1">

        <circle cx="200" cy="200" r="200" fill="white" />

    </mask>
    <image preserveAspectRatio="xMidYMid slice"  mask="url(#m1)" xlink:href="<?php echo get_template_directory_uri(); ?>/images/banner1.jpg" width="1000" height="500" class="target"/>
</svg>

<!-- the rest of HTML code -->

编辑：这是wordpress网站，因此一个选项可以检测浏览器在php中发出的请求，并仅为IE8返回不同的HTML。这是可靠的解决方案吗？通常怎么做？

EDIT2：找到了解决方案..我最终将svg包装在另一个div中并仅将其设置为display: none;仅用于IE8，通过JS，css等改变大小在SVG标签本身上根本没有用。上帝，我讨厌IE：/

Answer 1

您不必将SVG包装到另一个元素中。添加适当的名称空间声明并定位它们就足够了，例如：

[xmlns="http://www.w3.org/2000/svg"] {
  display: none;
}

您还可以使用modernizr，自定义测试或带条件注释的简单html标记开关，分别将类inlinesvg和no-inlinesvg（或类似内容）添加到HTML标记中：

.no-inlinesvg [xmlns="http://www.w3.org/2000/svg"] {
  display: none;
}

希望这有帮助！

Answer 2

我不会隐藏SVG，而是使用这个完成工作的小黑客。

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

Additional Info

Answer 3

这里的答案很晚，但在我的测试中，Josh C的解决方案不起作用，大概是因为IE8不知道<svg>是什么，它无法应用样式。

在我的案例中有用的是将<svg>包裹在<div id="svgWrapper">中。然后对Josh解决方案的修改工作非常顺利：

<!--[if lte IE 8]>
  <style type="text/css">
    #svgWrapper { display: none; }
  </style>
<![endif]-->

在我的特定情况下，我已经在IE的情况下添加了一个外部包装类，所以我需要的是一个针对.ie8 #svgWrapper的新样式，它似乎测试得很好。

编辑：我需要学会更好地阅读。显然，OP得出了相同的结论，答案完全没必要。

如何隐藏IE8中的SVG标签

3 个答案: