Question

我在一个页面上有2个<svg>，它打破了IE8中的布局（因为它不受支持）所以我需要隐藏它们，我认为这将是一个将display: none;添加到每个ID的问题但显然不是！我假设这是因为IE8不知道<svg>是什么或者用它做什么？

我对<svg>的标记如下：

    <svg id="billboard-svg" version="1.1" viewBox="-679.6 69.3 1646.3 400" preserveAspectRatio="xMinYMax slice" width="100%" height="400">
        <defs>
            <pattern id="svgbg" patternUnits="userSpaceOnUse" width="500" height="300">
                <image xlink:href="img/interface/bg-lightpaperfibers.png" x="0" y="0" width="500" height="300" />
            </pattern>
        </defs>
        <path fill="url(#svgbg)" vector-effect="non-scaling-stroke" d="M-696.2,247.3c336.3,90.5,609.6,109.9,796.2,110.5c64.1,0.2,105.5,0.4,165.2-4.1c244.8-18.5,365.5-82.4,702.3-132.2c15.9-2.4,28.7-4.1,36.1-5.2L987.2,638l-1689.8,2.7L-696.2,247.3z" />
    </svg>

和

    <svg id="footer-svg" width="100%" height="160" viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin slice" baseProfile="full">
        <defs>
            <pattern id="svgbg" patternUnits="userSpaceOnUse" width="500" height="300">
                <image xlink:href="img/interface/bg-lightpaperfibers.png" x="0" y="0" width="500" height="300" />
            </pattern>
        </defs>
        <path id="wave" fill="url(#svgbg)" vector-effect="non-scaling-stroke"  d="M 0,40 q 300,60 600,0 T 1210,20 l 0,-580 -1210,0" />
    </svg>

所以我尝试了#billboard-svg, #footer-svg {display: none;}，它什么也没做。然后我读到你可以定位＆＃39; xmlns＆＃39;所以我尝试了类似的东西：

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

这似乎摆脱了大缺失的形象＆＃39;占用了大量的空间，但布局仍然被打破，几乎就像它已经删除了部分svg标记但不是全部的？

如果有人可以的话，真的很感激一些帮助！

谢谢，史蒂夫

Answer 1

我没有IE8方便测试，但您是否尝试使用IE条件包装<svg>？

<!--[if gte IE 9]>
  <svg>
    ...etc...
  </svg>
<![endif]-->

Answer 2

最终解决这个问题的方法是删除xml名称空间属性 - xmlns="http://www.w3.org/2000/svg" - 我试过这篇文章感谢帖子：http://stuntbox.com/blog/2013/06/bulletproof-inline-svg/

您发布的代码中只有一个<svg>包含xmlns属性，但您可以尝试调整自动关闭的<path>元素，使其具有单独的结束标记，如上面链接中所建议的那样。

Answer 3

向html元素添加IE条件注释。

<!--[if lt IE 9 ]><html lang="en" class="old-ie"><![endif]-->
<html lang="en">

然后在CSS中定位该类。

.old-ie #billboard-svg {
   display: none;
}

在IE8中隐藏内联<svg> </svg>

3 个答案: