Use inline svg as background of the other element

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

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.

Answer 2

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 3

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;
}