html - 在 IE8 中隐藏内联 <SVG>

Question

我有 2 <svg>的页面破坏了 IE8 中的布局(因为它不受支持)所以我需要隐藏它们，我认为这是添加 display: none; 的问题每个ID的但显然不是!我假设这是因为 IE8 不知道什么是 <svg>是或如何处理它？<​​/p>

我对这两个 <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;}什么也没做。然后我读到你可以定位“xmlns”，所以我尝试了类似的东西:

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

这似乎摆脱了占用大量空间但布局仍然损坏的大“缺失图像”，几乎就像它删除了部分 svg 标记但不是全部？

如果有人能提供帮助，我将不胜感激!

谢谢， 史蒂夫

Answer 1

我手边没有 IE8 可以测试，但你试过包装 <svg> 吗？与 IE 条件？

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