SVG als Hintergrundbild erscheint nicht

Question

Ich habe die üblichen Lösungen ausprobiert, die ich im Netz finde, aber kann das Hintergrundbild nicht erscheinen lassen.

In der ersten Header, das SVG-Bild scheint seinen Container viel weiter als notwendig für seine viewBox. In der 2. Kopfzeile erscheint das Hintergrundbild überhaupt nicht. (SVG-Code ist das gleiche)

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/

Answer 1

Wenn Sie svg Code in url fügen Sie es nicht brechen sonst war es nicht funktioniert.

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>