Question

我想知道如何将我创建的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>

Answer 1

如果要通过CSS显示自定义SVG，可以分两个步骤进行操作：

将SVG转换为数据图像
将数据图像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>

将svg放入课堂

1 个答案: