3

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

3 Answers 3

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>

0

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.

-1

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;
}
2
  • I need background, placing inside isn't suitable.
    – Qwertiy
    Oct 7, 2016 at 12:02
  • this basically acts the same as a background
    – Grey
    Oct 7, 2016 at 12:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.