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作为背景图片不出现

回答

相关问题