Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Hide in ie8

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #193601
    grimski
    Participant

    I was wondering what is the best solution to hide/disable a SVG in Internet Explorer 8. I’ve tried display: none !important;, which doesn’t work at all so I’m guessing the browser has no idea what it is or how to interpret it?

    I’ve also tried [xmlns="http://www.w3.org/2000/svg"] {display: none;} which kinda worked …my page layout changed but it still wasn’t right (as it is if I remove the SVG from the mark-up completely). It was as if not all the SVG elements had been removed from the page?

    My mark-up for the 2 SVG’s is as follows:

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

    Hope someone can help and recommend a best-practice solution for this …if there is one!

    #193604
    Paulie_D
    Moderator

    Does IE8 even support SVG?

    I’m surprised it even renders.

    #193606
    Beverleyh
    Participant

    How about wrapping it in downlevel reveal conditional comments?

    <!--[if gte IE 9]><!-->
    <span>
    Hi, I'm visible in IE9+ and other modern browsers!
    </span>
    <!--<![endif]-->
    
    #193607
    Paulie_D
    Moderator

    It doesn’t …but it doesn’t hide it either

    Is it wrapped in an element or by itself.

    If it’s in a wrapper element, try hiding that instead.

    Of course, you should really have a fallback image for these eventualities.

    Alternatively, remove the dimensions from the SVG mark-up itself (width/height) and apply those with CSS instead.

    #193612
    Senff
    Participant

    display:none; should definitely work, if you put it in an IE8-specific CSS file.

    #193618
    Senff
    Participant

    You probably have an error somewhere else in your code then, cause under normal circumstances, setting display:none; on an SVG definitely hides it in IE8. See http://codepen.io/senff/pen/GgmWRG

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.