Verwenden Sie Inline-Svg als Hintergrund des anderen Elements

Question

Wie kann ich #bg als Hintergrund für section verwenden?

https://jsfiddle.net/42nn4b49/2/

div { 
 
    width: 4em; 
 
} 
 

 
section { 
 
    outline: 1px dotted red; 
 
    width: 8em; 
 
    height: 8em; 
 
    background: url(#bg); /* Desn't work */ 
 
}

<div> 
 
    <svg viewBox="-4 -4 8 8" id="bg"> 
 
    <circle r="4" /> 
 
    </svg> 
 
</div> 
 

 
<section></section>

PS: Same question in russian

Answer 1

schnell jsfiddle ich für Sie gemacht: https://jsfiddle.net/42nn4b49/7/

HTML:

<div> 
    <svg viewBox="-4 -4 8 8" class="bg"> 
    <circle r="4" /> 
    </svg> 
    <section>Test</section> 
</div> 

CSS:

div { 
    width: 4em; 
} 

.bg { 
    position: absolute; 
    top: 0; 
    width: 8em; 
    height: 8em; 
    z-index: -100; 
} 

section { 
    outline: 1px dotted red; 
    width: 8em; 
    height: 8em; 
background: url(#bg); 
    color: #fff; 
    text-align: center; 
} 

Answer 2

Ich gehe davon aus, dass sie das Ergebnis der absoluten Positionierung Ihrer nach ist. Im Wesentlichen wie @luuk erwähnt, ist alles, was Sie brauchen, beide Elemente in einen einzelnen Container zu verpacken und section { position : absolute;} zu setzen. Um das zu verstehen weiterlesen here.

#wrap { 
 
    position: relative; 
 
    width: 30%; 
 
    background: #eee; 
 
    padding: .5em; 
 
} 
 
section { 
 
    position: absolute; 
 
    color: #f8f8ff; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 2; 
 
    outline: 1px dotted red; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
#circle { 
 
    position: relative; 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 
p { 
 
    padding: 1.5em; 
 
}

<div id="wrap"> 
 
    <div id="circle"> 
 
    <svg viewBox="-4 -4 8 8" id="bg"> 
 
     <circle r="4" /> 
 
    </svg> 
 
    </div> 
 

 
    <section id="box"> 
 
    <p>This is my content.</section> 
 
</div>

Fühlen Sie sich frei, weitere Fragen zu stellen.

Answer 3

Ursprünglich hatte ich gehofft, die Ergebnisse der Drawing an SVG file on a HTML5 canvas und How to dynamically change a class css styling?

der Lage sein, jedoch zu kombinieren, so scheint es, nicht zu arbeiten - ich habe nicht in der Lage, herauszufinden, wie ein Hintergrund-Bild attrib ersetzen einer Regel. Die Nachricht console.log wird angezeigt, aber es ändert sich nichts.

Stattdessen habe ich mich entschieden, nur eine Regel zu erstellen, die nur das bkg img festlegt und es dann an das erste Stilelement im Kopf anfügt.

// useful for HtmlCollection, NodeList, String types 
 
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need 
 

 
window.addEventListener('load', onDocLoaded, false); 
 

 
function onDocLoaded(evt) 
 
{ 
 
    document.getElementById('mBtn').addEventListener('click', onBtnClicked, false); 
 
} 
 

 
function onBtnClicked(evt) 
 
{ 
 
    var svgElem = document.querySelector('svg'); 
 
    var b64SVG = getDataURL2(svgElem); 
 
    
 
    // doesn't work 
 
    //alterExistingCSSRuleAttrib('#panel', 'background-image', 'url('+b64SVG+');'); 
 

 
    // does work 
 
    addCssRule('#panel', 'background-image', 'url('+b64SVG+')'); 
 

 
    // does work 
 
    alterExistingCSSRuleAttrib('#panel', 'width', "200px"); 
 

 
    // doesn't work 
 
    alterExistingCSSRuleAttrib('#panel', 'border', "solid 3px green"); 
 

 
    // does work 
 
    alterExistingCSSRuleAttrib('#panel', 'border-top-color', "green"); 
 
    alterExistingCSSRuleAttrib('#panel', 'border-top-width', "5px"); 
 
} 
 

 
function addCssRule(selectorText, attribName, value) 
 
{ 
 
    var style = document.querySelector('style'); 
 
    style.innerHTML += selectorText + "{" + attribName + ": " + value + "; }"; 
 
} 
 

 
function getDataURL2(svgElem) 
 
{ 
 
    var xml = new XMLSerializer().serializeToString(svgElem); 
 
    var svg64 = btoa(xml); 
 
    var b64Start = 'data:image/svg+xml;base64,'; 
 
    return b64Start + svg64; 
 
} 
 
function alterExistingCSSRuleAttrib(selectorText, tgtAttribName, newValue) 
 
{ 
 
    var styleSheets = document.styleSheets; 
 
    forEach(styleSheets, styleSheetFunc); 
 

 
    function styleSheetFunc(CSSStyleSheet) 
 
    { 
 
     forEach(CSSStyleSheet.cssRules, cssRuleFunc); 
 
    } 
 

 
    function cssRuleFunc(rule) 
 
    { 
 
     if (selectorText.indexOf(rule.selectorText) != -1) 
 
     forEach(rule.style, cssRuleAttributeFunc); 
 

 
     function cssRuleAttributeFunc(attribName) 
 
     { 
 
      if (attribName == tgtAttribName) 
 
      { 
 
       rule.style[attribName] = newValue; 
 
       console.log('attribute replaced: '+attribName); 
 
      } 
 
     } 
 
    } 
 
}

#panel 
 
{ 
 
\t background: url(bluebombSmall.svg); 
 
\t display: inline-block; 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t border: solid 1px red; 
 
\t border-radius: 8px; 
 
} 
 
#bomb2 
 
{ 
 
\t display: none; 
 
}

<button id='mBtn'>Click to update/add styles</button><br> 
 
<div id='panel'></div> 
 
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" > 
 
    <g transform="translate(0,-1020.3622)"> 
 
    <path d="m23.23,15.84a10.55,10.55,0,1,1,-21.11,0,10.55,10.55,0,1,1,21.11,0z" transform="matrix(1.1875635,0,0,1.1875635,0.68612298,1020.367)" fill="#26201e"/> 
 
    <path d="m23.23,15.84a10.55,10.55,0,1,1,-21.11,0,10.55,10.55,0,1,1,21.11,0z" transform="matrix(0.86603158,0,0,0.86603158,2.4299747,1024.1874)" fill="#333"/> 
 
    <path d="m-13.04,19.32a1.964,1.964,0,1,1,-3.929,0,1.964,1.964,0,1,1,3.929,0z" transform="matrix(1.924285,1.1058108,-1.1908732,2.0723069,62.314757,1012.6494)" fill="#CCC"/> 
 
    <path d="m15.69,1026c0.02518-5.037,7.647-7.396,8.907-2.969,0.7936,2.761,1.349,5.666,4.877,6.786" stroke="#888" stroke-width="1.5px" fill="none"/> 
 
    <rect height="2.399" width="4.798" y="1026" x="13.31" stroke-width="0" fill="#26201e"/> 
 
    <path fill="#F00" transform="translate(2.0203051,1022.13)" d="M29.8,10.53,27.1,9.62,24.82,11.32,24.86,8.477,22.54,6.833,25.25,5.989,26.1,3.271,27.74,5.595,30.59,5.558,28.89,7.839z"/> 
 
    </g> 
 
</svg>