javascript - How set svg element as background-image in div? - Stack Overflow

admin管理员组

文章数量:1336660

I have svg element that created during runtime on the page (it is create by another library).

Is it possible to use this svg (id="svg1") as background-image to another div?

<div style="height:300px;background-image:url(..svg1...)"></div>

svg1:

<svg id="svg1" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="xMidYMid meet">
    <rect . . . > . . . </rect>
</svg>

If it possible to do that in css only it will be great

<svg id="svg1" viewBox="0 0 270 180" version="1.1" preserveAspectRatio="xMidYMid meet"><rect clip-path="url(#gwvlzeb48ee)" x="0" y="0" width="270" height="180" style="fill: url(&quot;#hz0tt22rgsn&quot;);"></rect><defs><clipPath id="gwvlzeb48ee"><rect x="0" y="0" rx="0" ry="0" width="270" height="140"></rect><rect x="0" y="145" rx="3" ry="3" width="150" height="15"></rect><rect x="0" y="165" rx="3" ry="3" width="150" height="15"></rect><rect x="220" y="145" rx="3" ry="3" width="50" height="15"></rect><rect x="220" y="165" rx="3" ry="3" width="50" height="15"></rect></clipPath><linearGradient id="hz0tt22rgsn"><stop offset="0.482599" stop-color="#e9e9e9" stop-opacity="1"><animate attributeName="offset" values="-2; 1" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="0.982599" stop-color="#efefef" stop-opacity="1"><animate attributeName="offset" values="-1.5; 1.5" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="1.4826" stop-color="#e9e9e9" stop-opacity="1"><animate attributeName="offset" values="-1; 2" dur="2s" repeatCount="indefinite"></animate></stop></linearGradient></defs></svg>

<div style="border:1px solid red; height:300px; background-image:url(#svg1);"></div>

I have svg element that created during runtime on the page (it is create by another library).

Is it possible to use this svg (id="svg1") as background-image to another div?

<div style="height:300px;background-image:url(..svg1...)"></div>

svg1:

<svg id="svg1" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="xMidYMid meet">
    <rect . . . > . . . </rect>
</svg>

If it possible to do that in css only it will be great

<svg id="svg1" viewBox="0 0 270 180" version="1.1" preserveAspectRatio="xMidYMid meet"><rect clip-path="url(#gwvlzeb48ee)" x="0" y="0" width="270" height="180" style="fill: url(&quot;#hz0tt22rgsn&quot;);"></rect><defs><clipPath id="gwvlzeb48ee"><rect x="0" y="0" rx="0" ry="0" width="270" height="140"></rect><rect x="0" y="145" rx="3" ry="3" width="150" height="15"></rect><rect x="0" y="165" rx="3" ry="3" width="150" height="15"></rect><rect x="220" y="145" rx="3" ry="3" width="50" height="15"></rect><rect x="220" y="165" rx="3" ry="3" width="50" height="15"></rect></clipPath><linearGradient id="hz0tt22rgsn"><stop offset="0.482599" stop-color="#e9e9e9" stop-opacity="1"><animate attributeName="offset" values="-2; 1" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="0.982599" stop-color="#efefef" stop-opacity="1"><animate attributeName="offset" values="-1.5; 1.5" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="1.4826" stop-color="#e9e9e9" stop-opacity="1"><animate attributeName="offset" values="-1; 2" dur="2s" repeatCount="indefinite"></animate></stop></linearGradient></defs></svg>

<div style="border:1px solid red; height:300px; background-image:url(#svg1);"></div>

Also this not working:

<!-- language: lang-html -->
<svg height="100" width="100" id="svg1">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  Sorry, your browser does not support inline SVG.  
</svg> 

<div style="border:1px solid red;height:300px; background-image:url(#svg1);"></div>

<!-- end snippet -->

• javascript
• html
• css
• svg

Share Improve this question Follow edited Sep 12, 2019 at 15:10 enxaneta 33.1k66 gold badges3232 silver badges4646 bronze badges asked Sep 12, 2019 at 11:44 Jon SudJon Sud 11.7k3131 gold badges102102 silver badges228228 bronze badges 6

• Have you tried it? – Paulie_D Commented Sep 12, 2019 at 11:46
• This syntax works : <div style="height:300px; background-image:url(#svg1)"></div> – Sackey Commented Sep 12, 2019 at 11:50
• 1 yes I tried, not working. codepen.io/Johnso1/pen/jONxgKK – Jon Sud Commented Sep 12, 2019 at 11:59
• the svg images should be in div with border red.. – Jon Sud Commented Sep 12, 2019 at 12:00
• Note some of URL's look funky. – Paulie_D Commented Sep 12, 2019 at 12:07

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

You can write the SVG right in your CSS. It's also possible to use background-repeat and all other background-attribues with this approach too.

div { 
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3/2000/svg" viewBox="0 0 100 100">\
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />\
  Sorry, your browser does not support inline SVG.  \
</svg> ') 0 / auto 100%;
}

<div style="height: 50px">

</div>

You can also place the SVG inside of the div and stretch it to cover with CSS. The benefits of this approach is you can style the SVG with CSS, as opposed to inlining it in the CSS using background-image. It all depends on your particular use case.

Demo: https://codepen.io/tedw/pen/bGbKGPB?editors=1100

.box {
  border: 1px solid blue;
  margin-bottom: 50px;
  position: relative;
}

.example-1 {
  height: 150px;
  width: 300px;
}

.example-2 {
  height: 200px;
  width: 200px;
}

.example-3 {
  height: 200px;
  width: 100px;
}

svg {
  fill: red;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  stroke: black;
  stroke-width: 3;
  width: 100%;
}

<!-- Example 1 -->
<div class="box example-1">
  <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
    <circle cx="50" cy="50" r="40"/>
  </svg>
</div>

<!-- Example 2 -->
<div class="box example-2">
  <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
    <circle cx="50" cy="50" r="40"/>
  </svg>
</div>

<!-- Example 3 -->
<div class="box example-3">
  <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
    <circle cx="50" cy="50" r="40"/>
  </svg>
</div>

本文标签： javascriptHow set svg element as backgroundimage in divStack Overflow