我现在有个svg,下面有个path标签,绘制了一个图标,我现在想在则会个图标正下方显示一点中文描述来描述这个图标的信息,比如我现在有这样的代码<svg id="screenOper" height="15" viewBox="0 0 512 512" style="margin-right:10px"> <path d="M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"/> </svg> 我怎么在这个图标下面显示”重置“这两个字眼,使人一眼就看出来这个图标的作用
时间: 2023-08-06 12:02:26 浏览: 216
您可以使用`<text>`元素来在SVG图标下方显示文本。以下是一个简单的示例,在SVG图标下方添加了"重置"这个文本:
```html
<svg id="screenOper" height="15" viewBox="0 0 512 512" style="margin-right:10px">
<path d="M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"/>
<text x="256" y="180" text-anchor="middle" font-size="12" fill="black">重置</text>
</svg>
```
在这个例子中,我们添加了一个`<text>`元素,设置了文本内容为"重置",位置为图标中心下方。`x`和`y`属性用于设置文本位置,`text-anchor`属性用于设置文本在x轴方向上的对齐方式,这里设置为"middle"表示居中对齐。`font-size`属性用于设置文本字体大小,`fill`属性用于设置文本颜色。
您也可以使用JavaScript和D3来动态添加文本元素和设置文本内容和位置。例如,以下代码使用D3添加文本元素,并将其放置在图标下方:
```javascript
// 选择SVG元素
var svg = d3.select("#screenOper");
// 添加文本元素
svg.append("text")
// 设置文本内容
.text("重置")
// 设置文本位置
.attr("x", 256)
.attr("y", 180)
// 设置文本样式
.style("font-size", "12px")
.style("fill", "black");
```
在这个例子中,我们首先使用`d3.select`方法选择SVG元素,然后使用`append`方法添加一个`text`元素。我们设置了文本内容为"重置",并使用`attr`方法设置了文本的位置。最后,我们使用`style`方法设置文本的字体大小和颜色。
阅读全文