Javascript SVG输入字段

我试图让我的一个SVG文本字段在用户按下时接受输入。有办法吗

const wrapper=document.getElementById'wrapper'； const text=document.getElementById'Username'； const inputWrapper=document.getElementById'input-wrapper'； const input=document.getElementById'input'； const button=document.getElementById'button'； text.addEventListener'click'，=>{ text.classList.toggle'hide'； inputWrapper.classList.toggle'hide'； 输入焦点； }; 按钮。addEventListener'单击'，=>{ text.classList.toggle'hide'； inputWrapper.classList.toggle'hide'； }; input.addEventListener'change'，e=>{ text.innerText=e.target.value； }; .cls-1{ 剪辑路径：urlclip-Login_页面； } .cls-2{ 不透明度：0.67； 填充：填充图案； } .cls-3{ 填充：d9d9d9； } .cls-3、.cls-5{ 行程：0D0D； } .cls-4{ 填充：urlpattern-2； } .cls-5{ 填充：f2f2f2； } .cls-6、.cls-7{ 填充：7070； 字体系列：格鲁吉亚； } .cls-6{ 字体大小：25px； } .cls-7{ 字体大小：20px； } .cls-8{ 中风：无； } .cls-9{ 填充：无； } .cls-10{ 填充：fff； } .cls-11{ 过滤器：URLU5； } .cls-12{ 过滤器：urlAmcan_标志； } .cls-13{ 过滤器：URLU2； } .隐藏{ 显示：无； } 提交 登录 用户名 提交 暗语 在tspan上使用contenteditable

更多信息请参见此处-

它是如何工作的

您所要做的就是在几乎所有HTML元素上设置contenteditable属性，使其可编辑

功能切换编辑{ var text=document.getElementById'Username'； var tspan=text.firstElementChild； tspan.setAttribute'contenteditable'，true； } 用户名 编辑输入不需要jquery或JS， 只需将contenteditable=true添加到该文本元素，您就完成了

用户名和不是html元素，而是具有自己属性的svg元素。属性contenteditable在tspan上不存在。您可以console.log document.querySelectormyTspan.isContentEditable，它将返回undefined

但是，它可以从其父级继承属性。因此，对于HTML文件中的内联svg，将svg包装在可编辑元素中在某些浏览器中可以工作，但所有文本都可以编辑

用户名

---

非常感谢你们的帮助！我发现我可以使用JavaScript“提示”表单来实现这一点。我所要做的就是实施以下内容：

函数更改用户名 { document.getElementById'Username'.textContent=prompt请输入您的用户名； }

---

是和否，您不能直接编辑文本，但可以将输入置于文本上方。请参阅下面的代码：

.输入实数{ 背景：rgba255，255，255，0； 颜色：透明； 填充：0； 边框：0非透明； 线高：0； } .输入实数：焦点{ 背景：rgba255、255、255、1； 颜色：333； } .输入实数， .输入模拟{ 字体系列：Arial、Helvetica Neue、Helvetica、无衬线字体； 字体大小：14px； } 用户名

---

我认为它只适用于HTML，当我更改代码时，它似乎不起作用：@DanielKlas与OP要求的可编辑SVG元素有什么关系？它不允许我更改文本。是的，这个网站上的代码片段工作得很好，但当我将其添加到文档中时，它根本不起作用文本“用户名”现在已消失，然而，我仍然无法在其位置添加任何文本：这相当棘手。为了能够编辑svg文本，必须将svg放入contenteditable元素中。但是，您需要一种方法来保护svg中的其余内容不被删除。这是一支钢笔，SVG中的文本可以编辑 ：另外：svg中有s，但未使用此代码无效