インラインsvgを他の要素の背景として使用

Question

sectionの背景として#bgをどのように使用できますか？

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

迅速jsfiddle：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

私はそれは絶対的な位置決めあなたの後の結果だということを前提としています。本質的に@luukが述べたように、必要なのは、両方の要素を単一のコンテナにラップし、section { position : absolute;}に設定することだけです。これをさらに理解するには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>

はそれ以上の質問をお気軽に。

Answer 3

はもともと、私はDrawing an SVG file on a HTML5 canvasとHow to dynamically change a class css styling?

の結果を組み合わせることができるように期待したいしかし、動作しないようです - 私は、背景画像ATTRIBを交換する方法を考え出すことができていませんでしたルールのconsole.logメッセージが表示されますが、何も変更されません。

代わりに、私は単にbkg imgを設定して、それを頭の中にある最初のスタイル要素に追加するルールを作成することを選択しました。

// 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>