Use inline svg as background of the other element - html

Question

How can I use #bg as a background for section?
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

Originally, I'd hoped to be able to combine the results of Drawing an SVG file on a HTML5 canvas and How to dynamically change a class css styling?
However, it seems not to work - I've not been able to work out how to replace a background-image attrib of a rule. The console.log message is shown, but nothing changes.
So instead, I've opted just to create a rule that just sets the bkg img, and then appended it to the first style element found inside the head.
// 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
{
background: url(bluebombSmall.svg);
display: inline-block;
width: 100px;
height: 100px;
border: solid 1px red;
border-radius: 8px;
}
#bomb2
{
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>

Answer 2

quick jsfiddle I made for you: 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 3

I assume that it's the result of absolute positioning your after. Essentially as #luuk mentioned, all you need is to wrap both elements in a single container, and set section { position : absolute;}. to understand this further read up 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.</p>
</section>
</div>
Feel free to ask any further questions.