如何在CSS文件中使用SVG并通过HTML代码调用

可以实现该需求，你示例中的CSS写法不符合规范，不能直接将SVG标签放在类选择器后面，需要将SVG处理为数据URI后，放在背景图或者伪元素的content属性中使用，正确实现方式如下：

示例代码 #

HTML代码 #

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

CSS代码（两种常用实现方案） #

方案1：通过background-image实现

需要给对应元素设置宽高：

.svg_gift {
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%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");
  background-size: cover;
}

方案2：通过伪元素content实现

.svg_gift::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' width='40' height='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");
}

注意事项 #

• SVG代码必须添加xmlns="http://www.w3.org/2000/svg"命名空间，否则浏览器无法识别
• 放在数据URI里的SVG需要转义特殊字符，比如<转成%3C、>转成%3E、#转成%23，双引号可以替换为单引号避免转义冲突
• 如果需要动态修改SVG的颜色，建议直接将fill属性写在path标签内，或使用inline SVG方案

内容的提问来源于stack exchange，提问作者intered