SVG 使用 createElementNS 添加的元素在 DOM 中但在屏幕上不可见

Question

问候大家，

首先，我不是 JS 专家，也不是一般的 web 开发人员。

我的目标是用 SVG 覆盖图像，这样当你 hover 它的某些部分时，它会突出显示。

问题如标题中所述：通过 createElementNS() 创建的 SVG 元素存在于 DOM 中，但在屏幕上不可见。

以下是我创建的相关代码片段：

<span class="image featured" id="tapestry_1_wrapper">
    <svg width="0" height="0" viewBox="0 0 0 0" id="draw_t1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"></svg>
    <img src="images/4525_low_800px.jpg" alt="[redacted]" id="t1">
</span>

（截断的）javascript 部分：

svg1 = document.getElementById("draw_t1");
t1 = document.getElementById("t1");
svg1.setAttribute("width", t1.clientWidth);
svg1.setAttribute("height", t1.clientHeight);

var new_rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
new_rect.setAttributeNS(null, "id", "my_id");
new_rect.setAttributeNS(null, 'x', x);
new_rect.setAttributeNS(null, 'y', y);
new_rect.setAttributeNS(null, 'width', w);
new_rect.setAttributeNS(null, 'height', h);
new_rect.setAttributeNS(null, "style", "stroke: #000000; fill:#FFFF00;");

svg1.appendChild(new_rect);

我可以在 DOM 中看到矩形，如果我在 DOM 中覆盖它，它会在 SVG 上突出显示它，但它永远不会显示其他内容（只是页面上的空白区域）。

如果你能给我任何错误的指示，或者以另一种方式做的方法，我会很高兴。

干杯!