Javascript 无法在svg rect中查看背景图像

嗨，我正在尝试在svg矩形上添加背景图像。但不幸的是，我无法看到矩形背景中的图像。我的代码片段是

rectCanvas_o = parentElement.append("rect");
rectCanvas_o.attr("width", "30").attr("height","100%").
attr("class", this.currentAlarmClass_s);


rectCanvas_o.append("defs").append("pattern").
attr("width", 20).attr("height", 20).
attr('patternUnits', 'userSpaceOnUse').append("image").
attr("width", 20).attr("height", 20).
attr("xlink:href", "image.png");

我还可以在chrome调试器中以html的形式查看我的代码

<rect width="30" height="100%" class="eq__NEcontainer__currentAlarmAction">
<defs>
  <pattern width="20" height="20" patternUnits="userSpaceOnUse">
   <image width="20" height="20" xlink:href="image.png"></image>
  </pattern>
</defs>
</rect>

但没有看到背景图像。图像位置正确。任何帮助都将不胜感激。感谢元素只定义了这个模式，它实际上并不会导致它被渲染到任何地方。

defs

中定义的工件需要被其他可见元素引用

rectCanvas_o.append("defs").append("pattern").attr("id", "my_pattern");

为了引用一个定义，您需要给它一个唯一的id（请注意，DEF可以位于SVG中的任何位置，并且可以被任何其他元素引用）

然后，需要设置rect的

fill

属性以引用定义的模式：

rectCanvas_o = parentElement.append("rect")
    .attr("width", "30")
    .attr("height","100%").
    .attr("class", this.currentAlarmClass_s)
    .style("fill", "url(#my_pattern)");

---

哦，我刚注意到你的DEF在你的直肠里。尝试将其移出，使整个defs元素与rect元素处于同一级别。嗨，Scott，我这样做了，但它也不起作用。我不知道我是否做了什么异常愚蠢的事情。这里有一篇类似的帖子，可能有助于进行比较。另外，你能用最后一个DOM片段更新你的问题，这样我们就可以一起看了吗？Scott，首先谢谢你。当我用id做图案的时候，它起作用了。很高兴你能弄明白。我已根据您建议的编辑更新了答案。谢谢