如何隐藏来自IE8的SVG标记 [英] How to hide SVG tag from IE8

问题描述

我有HTML页面，其中我呈现SVG和所有工程在现代浏览器和IE9 +。 IE8然而不显示svg和所有我看到的是空框。我试图使IE8和旧浏览器不渲染它，但所有尝试通常 display：none; ， width：0 等失败。我试图通过JS调用隐藏它，但没有什么似乎工作。如果我直接在HTML中改变宽度/高度，似乎工作。我的SVG部分在下面，如果任何人都可以给我一个想法如何让IE不显示这个SVG标签将是巨大的。

 < div class =slide panel> 
 
< svg width =1000height =500> 
< mask width =1000height =500maskUnits =userSpaceOnUsemaskContentUnits =userSpaceOnUseid =m1> 
 
< circle cx =200cy =200r =200fill =white/> 
 
< / mask> 
< image preserveAspectRatio =xMidYMid slicemask =url（＃m1）xlink：href =<？php echo get_template_directory_uri（）;？> /images/banner1.jpgwidth =1000 height =500class =target/> 
< / svg> 
 
<！ - 其余的HTML代码 - > 
  

编辑：这是wordpress网站，所以一个选项将检测什么浏览器请求在PHP和返回不同仅适用于IE8的HTML。这是可靠的解决方案吗？

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

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

希望这有助！

I have HTML page where I render SVG and all works fine in modern browsers and IE9+. IE8 however doesn't display svg and all I see is empty box. I'm trying to make IE8 and older browsers not to render it at all but all attempts at usual display: none;, width: 0 etc failed. I tried to hide it via JS call but nothing seems to work. If I change width/height directly in HTML it seems to work though. My SVG part is below, if anyone could give me an idea how to get IE not to display this SVG tag that would be great.

<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 -->

EDIT: this is wordpress site so an option would be detecting what browser made request in php and returning different HTML for IE8 only. Is this reliable solution though? How usually is it done?

EDIT2: Found solution.. I ended up wrapping svg in another div and setting it to display: none; for IE8 only, changing size via JS, css etc didnt work at all on SVG tag itself.. God, I hate IE :/

解决方案

You don't have to wrap your SVGs into another element. It's sufficient to add proper namespace declarations and target those, like:

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

You could also use modernizr, a custom test or a simple html tag switch with conditional comments to add the classes inlinesvg and no-inlinesvg (or something similar), respectively, to the HTML tag:

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

Hope this helps!

这篇关于如何隐藏来自IE8的SVG标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！