如何在 div 中将 svg 元素设置为背景图像？

Question

我有svg在运行时在页面上创建的元素（它是由另一个库创建的）。是否可以将此 svg (id="svg1") 用作另一个 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>如果只能在 css 中做到这一点，那就太好了<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>这也不起作用：<!-- 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 -->