我有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("#hz0tt22rgsn");"></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 -->
如何在 div 中將 svg 元素設置為背景圖像?
斯蒂芬大帝
2021-10-14 13:34:25
