<foreignObject> 中的 <textarea> 在 Chrome 中按预期处理，但在 Firefox 中没有

Posted 2023-05-07

【中文标题】<foreignObject> 中的 <textarea> 在 Chrome 中按预期处理，但在 Firefox 中没有

【英文标题】：<textarea> inside <foreignObject> handles as expected in Chrome but not Firefox

【发布时间】：2011-12-14 17:32:31

【问题描述】：

我正在 SVG 中的 foreignObject 中创建一个文本区域，如下所示：

var doc = document.getElementById("cover");
var foreign = document.createElementNS(svgNS,"foreignObject");
var textarea = document.createElementNS("http://www.w3.org/1999/xhtml","textarea");

foreign.setAttributeNS(null,"x",40);
foreign.setAttributeNS(null,"y",40);
foreign.setAttributeNS(null,"width",500);
foreign.setAttributeNS(null,"height",200);
doc.appendChild(foreign);

textarea.setAttributeNS(null,"xmlns","http://www.w3.org/2000/xmlns/");
textarea.textContent = "Text goes here.";
foreign.appendChild(textarea);

这在 Chrome 中运行良好。但是，在 Firefox 中，我根本看不到 textarea。当我检查 Firebug 时，它确实存在，但 firefox 强制对其进行静态定位，并且根据我的滚动方式，悬停在 html 选项卡中的对象上突出显示的框甚至不一定在 svg 内。即使它是，我也看不到textarea。我该怎么做才能在 Firefox 中解决这个问题？作为参考，我使用的是两种浏览器的最新版本（几小时前更新）。

【参考方案1】：

Works for me 如果我更改此行：

textarea.setAttributeNS(null,"xmlns","http://www.w3.org/2000/xmlns/");

到这里：

textarea.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns","http://www.w3.org/2000/xmlns/");

我认为 Firefox 只是对命名空间更加严格。这可能是一个错误，但 this indicates it's accepted 需要 http://www.w3.org/2000/xmlns/ 进行 DOM 处理：

前缀xmlns: 被指定为用于声明的句法设备 命名空间，但它本身并没有与任何命名空间名称相关联 1999 年 1 月的命名空间规范。但在某些处理环境中， 例如DOM，将所有 XML 属性表示为（命名空间 名称，本地名称）对。为此，命名空间名称 http://www.w3.org/2000/xmlns/ 已分配。

【讨论】：

这适用于 Firefox。知道如何使它适用于 IE，还是其他蠕虫罐头？

@Fibericon IE 仅在版本 9 中开始支持 SVG，支持为 well behind the other major browsers。对于旧版本，您可以尝试svgweb，但我认为如果您要使用foreignObject，本地支持是唯一真正的选择。