html svg添加一个删除小图标
时间: 2024-05-09 21:15:36 浏览: 149
html+css制作div标签增加右上角删除图标的示例代码
可以使用SVG的`<use>`元素来添加一个删除小图标,代码如下:
```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path fill="red" d="M19 6h-2.5L13 3H11l-3.5 3H5v2h14V6zM6.5 18c0 .55.45 1 1 1h9c.55 0 1-.45 1-1v-9H6.5v9z"/>
</svg>
```
然后在需要添加删除小图标的地方,使用`<use>`元素来引用该SVG图标,并设置对应的`xlink:href`属性即可,代码如下:
```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path fill="red" d="M19 6h-2.5L13 3H11l-3.5 3H5v2h14V6zM6.5 18c0 .55.45 1 1 1h9c.55 0 1-.45 1-1v-9H6.5v9z"/>
</svg>
<button>
<svg viewBox="0 0 24 24" width="16" height="16">
<use xlink:href="#delete-icon"/>
</svg>
</button>
```
其中,`xlink:href`属性的值为添加的SVG图标的id,这里假设为`delete-icon`。你可以根据需要修改代码中的颜色、大小等属性。
阅读全文