如何在 css 文件中使用 SVG？

Question

我想知道是否可以将 SVG 代码添加到 CSS 文件中并使用 HTMl 来调用它。我的意思是：

HTML：

   <div class="svg_gift"></div>

CSS：

  .svg_gift:<svg viewBox="0 0 40 40"><path class="st0" d="M38.1,10.6h-9.9c1.2-1,2-2.5,2-4.2c0-3-2.4-5.4-5.4-5.4c-2.4,0-4.5,1.6-5.2,3.8c-0.8-1-2-1.6-3.4-1.6c-2.4,0-4.3,1.9-4.3,4.3c0,1.2,0.5,2.3,1.3,3.1H1.9c-1,0-1.8,0.8-1.8,1.8V16c0,1,0.8,1.8,1.8,1.8v18.7c0,1,0.8,1.8,1.8,1.8h14.6h3.3h14.6c1,0,1.8-0.8,1.8-1.8V17.8c1,0,1.8-0.8,1.8-1.8v-3.6C39.9,11.4,39.1,10.6,38.1,10.6z M20.6,6.4c0-2.3,1.9-4.2,4.2-4.2c2.3,0,4.2,1.9,4.2,4.2c0,2.3-1.9,4.2-4.2,4.2h-3.2h-1V7.5V6.4z M21,16.6h-2.1v-4.8H20H21V16.6z M13.2,7.5c0-1.7,1.4-3.1,3.1-3.1c1.7,0,3.1,1.4,3.1,3.1v3.1h-1.1h-2.1C14.6,10.6,13.2,9.2,13.2,7.5z M1.3,16v-3.6c0-0.3,0.3-0.6,0.6-0.6h14.4h1.5v4.8H2.5H1.9C1.6,16.6,1.3,16.4,1.3,16z M3.1,36.5V17.8h14.6v19.3h-14C3.4,37.1,3.1,36.8,3.1,36.5z M18.9,37.1V17.8H21v19.3H18.9z M36.9,36.5c0,0.3-0.3,0.6-0.6,0.6h-14V17.8h14.6V36.5z M38.7,16c0,0.3-0.3,0.6-0.6,0.6h-0.6H22.3v-4.8h2.6h13.3c0.3,0,0.6,0.3,0.6,0.6V16z"/></svg>

Answer 1

您可以通过多种方式包含和显示 SVG 文件。您可以在 CSS 中将 SVG 用作background-image.

在 CSS 中包含外部 SVG 文件

在 CSS 中显示 SVG 的最简单方法是将 SVG 保存为单独的文件，并将其用作 CSS 中的背景，如下所示。

.svg_gift{
    background-image: url(your-path-to-svg.svg);
}

看看这个片段

.svg_gift{
    background-image: url(your-path-to-svg.svg);
}

.svg_gift{
  width: 300px;
  height: 300px;
  background-image: url(https://placeholder.pics/svg/300);
}

参考更多这里

将 SVG 直接包含在 CSS 中

正如@Kunal Tanwar在评论中提到的，SVG 代码可以通过SVG URL 编码器和类似工具编码为 data-uri。粘贴您的 SVG 代码，您只需获取要使用的 CSS 代码即可。

这是一个例子。

<div class="svg_gift"></div>

.svg_gift{
  width: 300px;
  height: 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath class='st0' d='M38.1,10.6h-9.9c1.2-1,2-2.5,2-4.2c0-3-2.4-5.4-5.4-5.4c-2.4,0-4.5,1.6-5.2,3.8c-0.8-1-2-1.6-3.4-1.6c-2.4,0-4.3,1.9-4.3,4.3c0,1.2,0.5,2.3,1.3,3.1H1.9c-1,0-1.8,0.8-1.8,1.8V16c0,1,0.8,1.8,1.8,1.8v18.7c0,1,0.8,1.8,1.8,1.8h14.6h3.3h14.6c1,0,1.8-0.8,1.8-1.8V17.8c1,0,1.8-0.8,1.8-1.8v-3.6C39.9,11.4,39.1,10.6,38.1,10.6z M20.6,6.4c0-2.3,1.9-4.2,4.2-4.2c2.3,0,4.2,1.9,4.2,4.2c0,2.3-1.9,4.2-4.2,4.2h-3.2h-1V7.5V6.4z M21,16.6h-2.1v-4.8H20H21V16.6z M13.2,7.5c0-1.7,1.4-3.1,3.1-3.1c1.7,0,3.1,1.4,3.1,3.1v3.1h-1.1h-2.1C14.6,10.6,13.2,9.2,13.2,7.5z M1.3,16v-3.6c0-0.3,0.3-0.6,0.6-0.6h14.4h1.5v4.8H2.5H1.9C1.6,16.6,1.3,16.4,1.3,16z M3.1,36.5V17.8h14.6v19.3h-14C3.4,37.1,3.1,36.8,3.1,36.5z M18.9,37.1V17.8H21v19.3H18.9z M36.9,36.5c0,0.3-0.3,0.6-0.6,0.6h-14V17.8h14.6V36.5z M38.7,16c0,0.3-0.3,0.6-0.6,0.6h-0.6H22.3v-4.8h2.6h13.3c0.3,0,0.6,0.3,0.6,0.6V16z'/%3E%3C/svg%3E");
}