无法将 SVG 设置为背景

Question

我有 html 页面我想将背景 jpg 图像更改为 svg，

<section class="hero-section set-bg" style="background-image: url("data:image/svg+xml,%0A%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg37' version='1.1' viewBox='0 0 200 200' height='800' width='800'%3E%3Cmetadata id='metadata41'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Crect id='rect2' height='200' width='200' fill='%23006aff' /%3E%3Cdefs id='defs29'%3E%3ClinearGradient y2='0' x2='0' y1='88' x1='88' gradientUnits='userSpaceOnUse' id='a'%3E%3Cstop id='stop4' stop-color='%238f8f8f' offset='0' /%3E%3Cstop id='stop6' stop-color='%23e3e3e3' offset='1' /%3E%3C/linearGradient%3E%3ClinearGradient y2='160' x2='168' y1='76' x1='75' gradientUnits='userSpaceOnUse' id='b'%3E%3Cstop id='stop9' stop-color='%238f8f8f' offset='0' /%3E%3Cstop id='stop11' stop-color='%23b3b3b3' offset='0.09' /%3E%3Cstop id='stop13' stop-color='%23c9c9c9' offset='0.18' /%3E%3Cstop id='stop15' stop-color='%23dbdbdb' offset='0.31' /%3E%3Cstop id='stop17' stop-color='%23e8e8e8' offset='0.44' /%3E%3Cstop id='stop19' stop-color='%23f2f2f2' offset='0.59' /%3E%3Cstop id='stop21' stop-color='%23fafafa' offset='0.75' /%3E%3Cstop id='stop23' stop-color='%23FFFFFF' offset='1' /%3E%3C/linearGradient%3E%3Cfilter height='200%25' width='200%25' y='0' x='0' id='c'%3E%3CfeGaussianBlur id='feGaussianBlur26' stdDeviation='12' in='SourceGraphic' /%3E%3C/filter%3E%3C/defs%3E%3Cpolygon id='polygon31' points='0 174 0 0 174 0' fill='url(%23a)' /%3E%3Cpath id='path33' d='M121.8 174C59.2 153.1 0 174 0 174s63.5-73.8 87-94c24.4-20.9 87-80 87-80S107.9 104.4 121.8 174z' filter='url(%23c)' fill-opacity='.5' fill='%23000' /%3E%3Cpath id='path35' d='M142.7 142.7C59.2 142.7 0 174 0 174s42-66.3 74.9-99.3S174 0 174 0S142.7 62.6 142.7 142.7z' fill='url(%23b)' /%3E%3C/svg%3E%0A");" >

</section>

当我从代码中这样做时它不起作用并且代码转移到

background-image: url(undefined)

设置背景和图像效果很好，也可以为浏览器设置 svg 背景，但是当我在代码中使用它时却不行。

我也尝试删除 class set-bg

我认为可能存在引号问题

Answer 1

内引号应为 "，该部分需要大小。

html, body, section {
  width: 100%;
  height: 100%;
}

<section class="hero-section set-bg" style="background-image: url(&quot;data:image/svg+xml,%0A%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg37' version='1.1' viewBox='0 0 200 200' height='800' width='800'%3E%3Cmetadata id='metadata41'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Crect id='rect2' height='200' width='200' fill='%23006aff' /%3E%3Cdefs id='defs29'%3E%3ClinearGradient y2='0' x2='0' y1='88' x1='88' gradientUnits='userSpaceOnUse' id='a'%3E%3Cstop id='stop4' stop-color='%238f8f8f' offset='0' /%3E%3Cstop id='stop6' stop-color='%23e3e3e3' offset='1' /%3E%3C/linearGradient%3E%3ClinearGradient y2='160' x2='168' y1='76' x1='75' gradientUnits='userSpaceOnUse' id='b'%3E%3Cstop id='stop9' stop-color='%238f8f8f' offset='0' /%3E%3Cstop id='stop11' stop-color='%23b3b3b3' offset='0.09' /%3E%3Cstop id='stop13' stop-color='%23c9c9c9' offset='0.18' /%3E%3Cstop id='stop15' stop-color='%23dbdbdb' offset='0.31' /%3E%3Cstop id='stop17' stop-color='%23e8e8e8' offset='0.44' /%3E%3Cstop id='stop19' stop-color='%23f2f2f2' offset='0.59' /%3E%3Cstop id='stop21' stop-color='%23fafafa' offset='0.75' /%3E%3Cstop id='stop23' stop-color='%23FFFFFF' offset='1' /%3E%3C/linearGradient%3E%3Cfilter height='200%25' width='200%25' y='0' x='0' id='c'%3E%3CfeGaussianBlur id='feGaussianBlur26' stdDeviation='12' in='SourceGraphic' /%3E%3C/filter%3E%3C/defs%3E%3Cpolygon id='polygon31' points='0 174 0 0 174 0' fill='url(%23a)' /%3E%3Cpath id='path33' d='M121.8 174C59.2 153.1 0 174 0 174s63.5-73.8 87-94c24.4-20.9 87-80 87-80S107.9 104.4 121.8 174z' filter='url(%23c)' fill-opacity='.5' fill='%23000' /%3E%3Cpath id='path35' d='M142.7 142.7C59.2 142.7 0 174 0 174s42-66.3 74.9-99.3S174 0 174 0S142.7 62.6 142.7 142.7z' fill='url(%23b)' /%3E%3C/svg%3E%0A&quot;);” >

</section>

Answer 2

一种实现方法如下：-

body {
  background: #f06d06;
  padding: 20px;
}

section {
  background: white;
  width: 40%;
  padding: 20px;
  position: relative;
background: url(https://upload.wikimedia.org/wikipedia/commons/c/cc/NATO_Map_Symbol_-_Friendly_Unit_-_Solid.svg) bottom center;
  background-size: 100% 100%;
}

<section>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
</section>

无法将 SVG 设置为背景

Unable to Set SVG As BackGround

html

css

svg

background