我如何为svg中的每个矩形添加材料图标

Question

我有一个场景，我正在显示有5个矩形的svg，我想从材料ui中添加删除图标(从'@mui/icons-material/delete '导入DeleteIcon)在矩形框前面的每个矩形，所以总共应该有5个删除图标。

材质UI: https://mui.com/material-ui/material-icons/?query=delete&selected=Delete

代码如下:

function svg() {
g.selectAll("g.legendCells")
.data(data)
.enter()
.append("g")
.append("rect")
g.selectAll("rect")
.attr("height", 1)
.attr("width", 1)
.style("fill", function (data) {
return data["color"];
});
g.selectAll("rect")
.attr("x", function (_d: number, i: number) {
return i;
})
.attr("y", 0);
}

Jsfiddle: https://jsfiddle.net/b2motr3c/2/

Answer 1

deleteIcon的svg如下所示:

<svg viewBox="0 0 24 24" data-testid="DeleteIcon">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
</svg>

你可以把它放在主svg元素中，并将其转换为具有相同viewBox属性的符号。由于该符号有一个viewbox，所以use元素不仅可以接受x和y属性，还可以接受width和height属性。

正如我所评论的，你可以给使用相同的x y宽度和高度作为<rect>。这将根据需要调整符号的位置(x y)和大小(宽度，高度)。

请注意，一旦你有了一个符号，你可以重复使用它(与<use>)作为你需要的次数。

<svg width="300" height="200" style="outline: 5px dotted green">
<symbol viewBox="0 0 24 24" id="DeleteIcon">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
</symbol>

<rect x="70" y="10" width="20" height="20" style="fill:green" />

<use href="#DeleteIcon" x="70" y="10" width="20" height="20" fill="white"/>
</svg>

Answer 2

我将如何处理它是封装在组元素中的每个矩形和放置一个'DeleteIcon'(从导入)组件里面，例如:

<g>
<rect x="70" y="10" width="20" height="20" style="fill: green" />
<DeleteIcon />
</g>

然后调整x/y属性和任何其他相关属性，以适合您想要的外观。