Javascript 尝试使用图像网格创建SVG。但是图像不'；不显示

我正在尝试在SVG上创建图像的网格布局。 但是，当我在SVG上附加图像标记时，它不会显示。我确实将标记从img更改为image并附加svg/image 但它似乎不起作用。我可以用plan D3.js实现它，但我需要SVG，因为我想调用D3brush功能。下面是我的代码

使用SVG编码

var svg=d3.选择（“网格图”）
.append（“svg”）
.attr（“宽度”，200）
.attr（“高度”，200）
.classed（“网格容器”，真）；
var grid=svg.append（“div”）
.attr（“id”、“网格”）
.attr（“类别”、“网格”）；
面片=网格
.selectAll（“图像”）
.数据（选定数据）
.输入（）
.append（“svg:image”）
.attr（“id”，函数（d，i）{return“patchid_”+d[0]}）
.attr（“类”，函数（d，i）{return“patch”+d[4]+“select_patch”}）
.attr（“xlink:href”，“train\u 10\u 0\u 0.png”）
.attr（“宽度”，“32px”）
.attr（“高度”、“32px”）；

用D3编码

grid=d3.选择（“网格图”）
.附加（“div”）
.attr（“id”、“网格”）
.attr（“类”、“网格”）
;
面片=网格
.全选（“img”）
.数据（选定数据）
.输入（）
.附加（“img”）
.attr（“id”，函数（d，i）{return“patchid_”+d[0]}）
.attr（“类”，函数（d，i）{return“patch”+d[4]+“select_patch”}）
.attr（“src”，“train\u 10\u 0\u 0.png”）
.attr（“宽度”，“32px”）
.attr（“高度”、“32px”）；

任何帮助或指点都将不胜感激

---

通过将

div

添加到

svg

中，您破坏了它的渲染。我用一个

g

-标记替换了它，事情就直接开始了。这里有一些例子

var svg=d3.选择（“网格图”）
.append（“svg”）
.attr（“宽度”，200）
.attr（“高度”，200）
.classed（“网格容器”，真）；
var grid=svg.append（“g”）
.attr（“id”、“网格”）
.attr（“类别”、“网格”）；
var selectedData=[0,1,2,3,4,5,6,7,8]；
网格
.selectAll（“图像”）
.数据（选定数据）
.输入（）
.append（“svg:image”）
.attr（“id”，函数（d，i）{
返回“patchid_uud”+d
})
.attr（“类”，函数（d，i）{
返回“补丁”+d+“选择补丁”
})
.attr（“xlink:href，”https://via.placeholder.com/32")
.attr（“转换”，函数（d，i）{
返回“translate（“+（（i%3）*50）+”，“+（数学地板（i/3）*50）+”）；
})

谢谢您的评论，是的，我这样做是因为我无法将样式应用于我要添加的图像对象，希望每个图像都有一个彩色边框。啊，是的，您可以通过在每个图像后面绘制一个

rect

，如