时间戳

首页 > 解决方案 > 'background-image:url(background.svg)' 中的 SVG 不显示

html - 'background-image:url(background.svg)' 中的 SVG 不显示

问题描述

我想使用 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

标签： htmlcsssvg

解决方案

您正在使用包含不合规字符的 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>

建议
在 html/css/js 中使用您也将用于选择器的 Id 或类名。

另请参阅为什么在标签中使用 SVG 时，linearGradient ID 中的冒号会破坏它们？

推荐阅读