SVG 内的输入框在对焦时显示黑色

问：

我正在绘制具有三个矩形的 svg，每个矩形都有特定的文本（标签）。我有一个要求能够编辑文本，它应该采用用户定义的标签。 我尝试了一些东西，例如使用输入框和文本的 contenteditable true 属性来编辑 SVG 文本。不幸的是，contenteditable 不起作用，使用输入框部分工作。输入框的问题是，当我专注于输入时，我看到黑色，如下面的快照所示，不确定它从哪里拍摄。由于我在输入框聚焦时遇到问题，因此我也无法进行调试，因为当我单击检查元素时，焦点会松动，并且不会有任何黑色进行调试。我不确定黑色是否与某些字体问题或其他问题有关，尝试更改字体但没有任何效果。 我已经分享了我的代码部分。

const drawSvg= svg.append("g")
. append("rect")
.attr("id", "myRect")
. style("fill", function (d) {color});
g.selectAll("g"). append("text").attr("id", "myText").on("click", textClick)
.text (function (d) {return label;});
g.selectAll("g").append("foreignObject")

function textClick(evt) {
let originalText = evt.target.innerHTML
const input = document.createElement("input");
input.value = originalText;
input.onkeyup = function(e) {
evt.target.innerHTML = input.value;
};
input.onfocus = function(e) { 
evt.target.innerHTML = input.value;
};
input.onblur = function(e) {
input.remove();
};
input.style.fontSize = "1.25em"
input.style.padding = "0"
input.style.border = "none"
input.style.height = "1px"
input.style.width = "4px"
const myCells = document.querySelectorAll('.myForeignObject');
for (let i=0; i < myCells.length; i++) {
myCells[i].appendChild(input)
}
}