2

我有渲染 SVG 的 HTML 页面，并且在现代浏览器和 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：/

4

3 回答 3

3

您不必将 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;
}

希望这可以帮助！

于 2014-04-25T18:02:43.887 回答
1

我不会隐藏 SVG，而是使用这个小技巧来完成工作。

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

附加信息

于 2013-09-02T04:31:35.650 回答
0

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

在我的情况下起作用的是<svg>将<div id="svgWrapper">. 然后对 Josh 的解决方案进行了修改，效果非常好：

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

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

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

于 2014-04-04T21:01:22.620 回答