css
  • svg
  • internet-explorer-11
  • inline-svg
  • 2016-05-31 117 views 2 likes 
    2

    我在我的CSS中將以下內聯SVG定義爲背景圖像。內聯SVG背景無法在Internet Explorer 11中工作

    div { 
        border: 1px solid black; 
        background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M2 10 L8 0 L10 0 L10 10' fill='%238A92DF'></path></svg>"); 
        background-repeat: no-repeat; 
        background-position: center center; 
        background-size: 100%; 
    } 
    

    它在Chrome,Firefox和Edge中運行正常,但在Internet Explorer 11中失敗。爲什麼?

    JSfiddle here.

    回答

    2

    你有完整的URL編碼您的SVG。

    如果您使用VSCode,有一個名爲「URL編碼」擴展,它會爲你做到這一點...或者你可以很容易地找到一個在線:https://meyerweb.com/eric/tools/dencoder/

    請注意,我也被刪除「版本」屬性和「字符集= UTF8」的一部分,不知道是否需要的,但要明確的事情了......

    div { 
     
        border: 1px solid black; 
     
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2010%2010'%3E%3Cpath%20d%3D'M2%2010%20L8%200%20L10%200%20L10%2010'%20fill%3D'%238A92DF'%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); 
     
        background-repeat: no-repeat; 
     
        background-position: center center; 
     
        background-size: 100%; 
     
        width: 500px; 
     
        height: 500px; 
     
    }
    <div></div>

    +0

    你來晚了黨,但仍然是非常感激。現在我將更接近我的web應用程序中的完整IE11支持。 – aanders77

    +0

    我知道:)我在谷歌搜索,這是第一個鏈接,所以我回答,任何人可能會在這裏結束.... –

    相關問題