svg作为content
时间: 2023-08-07 19:02:10 浏览: 43
可以通过使用 `content` 属性来将SVG图像插入到HTML元素中。首先,需要将SVG图像转换为Base64编码格式。可以使用在线工具或者本地工具来完成这个转换。例如,在线工具 https://base64.guru/converter/encode/image/svg 可以将SVG文件转换为Base64编码格式。
转换后,可以将Base64编码格式的SVG图像作为 `content` 属性的值,插入到HTML元素中。例如:
```css
.element::before {
content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDEwIDEwIj4KICA8cGF0aCBkPSJNMCwwQzAsMCwwLDEsMFoiIGZpbGw9IiMwMDAiLz4KICA8cGF0aCBkPSJNMTEsNS4xQzExLjEsNS4xLDEwLjcsNC4zLDEwLjcsNi4xQzEwLjcsNi4xLDExLjEsNS4xLDExLjEsMTAuN1oiIGZpbGw9IiMwMDAiLz4KICA8cGF0aCBkPSJNMjQuNSwxMy45YzAuMSwwLjEsMC4yLDAuMywwLjYsMC40QzIzLjUsMTMuOSwyNi4zLDEzLjksMjQuNSwxMy45eiIgZmlsbD0iI2ZmZiIvPgogIDxwYXRoIGQ9Ik0yNC41LDkuMmMwLjEsMC4xLDAuMywwLjMsMC41LDAuNGMwLjUsMC4xLDAuNywwLjMsMS4yLDAuM0MyMy41LDkuMiwyNCwxMC43LDI0LjUsOS4yeiIgZmlsbD0iI2ZmZiIvPgogIDxwYXRoIGQ9Ik0xOC44LDEwLjdjLTAuMSwwLjEtMC4zLDAuMi0wLjQsMC4zYy0wLjMsMC4zLTAuNywwLjUtMC40LDAuNEMxNi40LDEwLjYsMTguNSwxMC43LDE4LjgsMTAuN3oiIGZpbGw9IiNmZmYiLz4KICA8cGF0aCBkPSJNMjQuNSw5LjJjMC4xLDAuMSwwLjMsMC4zLDAuNSwwLjRjMC41LTAuMSwwLjctMC4zLDEuMi0wLjNDMjMuNSw5LjIsMjQuLDkuMiwzLjksOS4yeiIgZmlsbD0iI2ZmZiIvPgogIDxwYXRoIGQ9Ik0xOC44LDEzLjljLTAuMSwwLjEtMC4zLDAuMi0wLjQsMC4zYy0wLjMsMC4zLTAuNywwLjUtMC40LDAuNEMxNi40LDEzLjIsMTguNSwxMy45LDE4LjgsMTMuOXoiIGZpbGw9IiNmZmYiLz4KICA8cGF0aCBkPSJNMjQuNSwxNy40YzAuMSwwLjEsMC4zLDAuMywwLjUsMC40YzAuNS0wLjEsMC43LTAuMywxLjItMC4zQzIzLjUsMTcuNCwyNCwxNy40LDI0LjUsMTcuNHoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==');
display: inline-block;
width: 10px;
height: 10px;
}
```
以上代码将SVG图像作为 `content` 属性的值,插入到 `::before` 伪元素中,并设置了元素的宽度和高度。需要注意的是,SVG图像必须以 `data:image/svg+xml;base64,` 开头,后面跟着的是Base64编码格式的SVG图像数据。