SVG内输入框聚焦时出现黑色异常问题求助

我正在绘制包含三个矩形及对应文本标签的SVG，需要实现文本可编辑功能。尝试使用contenteditable属性（未生效）和input框（仅部分生效），但input框聚焦时会出现黑色异常，且无法调试（点击检查元素会失焦，黑色消失），调整字体也无效。

相关代码如下：

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)
}
}

问题截图：

内容的提问来源于stack exchange，提问作者Eric