时间戳

首页 > 解决方案 > 将 svg 放入课堂

html - 将 svg 放入课堂

问题描述

我想知道如何将我创建的 svg 放入 css 或 scss 类中，以仅分配图标中的类，如以下 w3 示例所示：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-home"></i>

标签： htmlcsssass

解决方案

如果您想通过 CSS 显示自定义 SVG，您可以分两步完成：

  1. 将 SVG 转换为数据图像
  2. 使用数据图像 SVG 作为 CSS 背景

工作示例：

div {
display: inline-block;
width: 40px;
height: 40px;
margin-right: 1px;
background-color: rgb(255, 0, 0);
}

.svg-background {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="2" y="3" width="36" height="5" fill="rgb(255, 255, 255)" /><rect x="2" y="11" width="36" height="5" fill="rgb(255, 255, 255)" /><rect x="2" y="19" width="36" height="5" fill="rgb(255, 255, 255)" /></svg>');
}
<div></div>
<div class="svg-background"></div>

推荐阅读