文章/答案/技术大牛

发布

问如何对IE8隐藏SVG标签
EN

Stack Overflow用户

提问于 2013-09-02 12:18:48

回答 3查看 1.4K关注 0票数 2

我有一个超文本标记语言页面，在那里我渲染了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中，并将其设置为仅用于IE8的display: none;，通过JS、css等更改大小对SVG标签本身根本不起作用。天哪，我讨厌IE :/

html

css

svg

回答 3

Stack Overflow用户

发布于 2014-04-26 02:02:44

您不必将SVG包装到另一个元素中。添加适当的名称空间声明并针对这些名称空间声明就足够了，比如：

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

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

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

希望这能有所帮助！

票数 3

Stack Overflow用户

发布于 2013-09-02 12:31:36

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

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

Additional Info

票数 1

Stack Overflow用户

发布于 2014-04-05 05:01:23

在这里稍晚回答，但在我的测试中，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得出了同样的结论，答案完全没有必要。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18565585

复制

相似问题

问如何对IE8隐藏SVG标签
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何对IE8隐藏SVG标签EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何对IE8隐藏SVG标签
EN