SVG作爲背景圖片不出現

我已經嘗試了我在網上找到的常用解決方案，但無法獲取背景圖像出現。SVG作爲背景圖片不出現

在第一個標題中，SVG圖像看起來比其viewBox所需的容器大得多。在第二個標題中，背景圖像完全不顯示。（SVG代碼是相同的）

HTML：

header { 
 
    margin: 1rem auto 0 auto; 
 
    border: 1px solid red; 
 
} 
 

 
.container { 
 
    border: 2px dotted orange; 
 
} 
 

 
.container svg { 
 
    border: 1px dashed blue; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#inline-svg { 
 
    border: 2px dashed pink; 
 
} 
 

 
#header1 {} 
 

 
#header2 { 
 
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='background-svg' width='400px' height='200px' viewBox='0 0 400px 200px'> 
 
<ellipse cx='200' cy='100' rx='200' ry='100' fill='green' /> </svg>"); 
 
background-size: auto auto; 
 
} 
 

 
#background-svg { 
 
    border: 3px solid black; 
 
}

<header id="header1" class="masthead"> 
 
    <div id="1st-container" class="container"> 
 
    <svg xmlns='http://www.w3.org/2000/svg' id='inline-svg' width='200px' height='100px' viewBox='0 0 200px 200px'> 
 
     <ellipse cx='200' cy='100' rx='200' ry='100' fill='green' /> 
 
    </svg> 
 
    </div> 
 
</header> 
 

 
<header id="header2" class="masthead"> 
 
    <div id="2nd-container" class="container"> 
 
    hello 
 
    </div> 
 
</header>

https://jsfiddle.net/abalter/c4fmou2n/

來源

2017-09-14 abalter

你不能在你的數據的URI換行。在你的CSS中''之前的換行符是你的問題的原因。 –

當您在網址請不打破它，否則它不工作添加SVG代碼。

header { 
 
    margin: 1rem auto 0 auto; 
 
    border: 1px solid red; 
 
} 
 
.container { 
 
    border: 2px dotted orange; 
 
} 
 
.container svg { 
 
    border: 1px dashed blue; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#inline-svg { 
 
    border: 2px dashed pink; 
 
} 
 
#header1 {} 
 
#header2 { 
 
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='background-svg' width='400px' height='200px' viewBox='0 0 400px 200px'><ellipse cx='200' cy='100' rx='200' ry='100' fill='green' /> </svg>"); 
 
    background-size: auto auto; 
 
} 
 
#background-svg { 
 
    border: 3px solid black; 
 
}

<header id="header1" class="masthead"> 
 
    <div id="1st-container" class="container"> 
 
    <svg xmlns='http://www.w3.org/2000/svg' id='inline-svg' width='200px' height='100px' viewBox='0 0 200px 200px'> 
 
     <ellipse cx='200' cy='100' rx='200' ry='100' fill='green' /> 
 
    </svg> 
 
    </div> 
 
</header> 
 

 
<header id="header2" class="masthead"> 
 
    <div id="2nd-container" class="container"> 
 
    hello 
 
    </div> 
 
</header>

來源

2017-09-14 05:28:28

對不起。這是因爲某種原因粘貼時發生的事情。衛生署。 – abalter

SVG作爲背景圖片不出現

回答

相關問題