亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 div 中將 svg 元素設置為背景圖像?

如何在 div 中將 svg 元素設置為背景圖像?

斯蒂芬大帝 2021-10-14 13:34:25
我有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 -->
查看完整描述

2 回答

  • 2 回答
  • 0 關注
  • 597 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號