我想使用 svg 影像作為 div 的背景，但它沒有顯示在任何瀏覽器上。
附上下面的截圖：
HTML :
<div class="landing></div>
CSS :
background-image : url(bg.svg);
width:100vw;
height:100vh;
background-repeat: no-repeat;
background-size: contain;
請注意，我使用的 svg 相當復雜。在使用具有簡單形狀和單一顏色的 svg 時，它似乎可以正常作業。附上 svg 的螢屏截圖供您參考。在此處輸入圖片說明
最小可 重復示例：Codepen
uj5u.com熱心網友回復：
問題來自cloudinary檔案路徑。您可以fl_sanitize在 cloudinary 中使用該標志，
也可以為背景 URL 設定本地檔案路徑。
這里詳細介紹了 Cloudinary https://support.cloudinary.com/hc/en-us/community/posts/115000752672/comments/115000145951
uj5u.com熱心網友回復：
您正在使用包含不合規字符的 id – 在您的情況下，它是冒號 ':'
<g clip-path="url(#clip0_32:2)">
直接在 chrome 中查看 svg 檔案將顯示影像。在 html 背景關系中，chrome 將拒絕呈現它。
所以你可以很容易地用一個連字符替換所有的出現，例如：
<svg width="1440" height="810" viewBox="0 0 1440 810" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_32-2)">
<rect width="1440" height="810" fill="white"/>
<g style="mix-blend-mode:darken" filter="url(#filter0_f_32-2)">
<ellipse cx="336" cy="473" rx="481" ry="288" fill="url(#paint0_radial_32-2)" fill-opacity="0.4" style="mix-blend-mode:multiply"/>
</g>
<g style="mix-blend-mode:darken" filter="url(#filter1_f_32-2)">
<ellipse cx="2068.5" cy="661" rx="474.5" ry="215" fill="url(#paint1_radial_32-2)" fill-opacity="0.2" style="mix-blend-mode:multiply"/>
</g>
</g>
<defs>
<filter id="filter0_f_32-2" x="-310.91" y="19.09" width="1293.82" height="907.82" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="82.955" result="effect1_foregroundBlur_32-2"/>
</filter>
<filter id="filter1_f_32-2" x="1428.09" y="280.09" width="1280.82" height="761.82" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="82.955" result="effect1_foregroundBlur_32-2"/>
</filter>
<radialGradient id="paint0_radial_32-2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-56.305 490.702) rotate(1.378) scale(1048.6 628.503)">
<stop stop-color="#217AE2"/>
<stop offset="0.419491" stop-color="#181FCE"/>
<stop offset="1" stop-color="#00B6DE"/>
</radialGradient>
<radialGradient id="paint1_radial_32-2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1681.5 674.215) rotate(1.0429) scale(1034.3 469.253)">
<stop stop-color="#217AE2"/>
<stop offset="0.419491" stop-color="#181FCE"/>
<stop offset="1" stop-color="#00B6DE"/>
</radialGradient>
<clipPath id="clip0_32-2">
<rect width="1440" height="810" fill="white"/>
</clipPath>
</defs>
</svg>另請參閱為什么在標記中使用 SVG 時，linearGradient ID 中的冒號會破壞它們？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/349813.html
上一篇：無法啟動新的Nextjs應用程式無法加載next.config.js
下一篇：php中按鍵重構多維json