Question

我正在SVG中的foreignObject中创建一个textarea，如下所示：

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。我该怎么做才能解决这个问题？作为参考，我使用的是两种浏览器的最新版本（几小时前更新）。

Answer 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/。

<textarea>里面＆lt; foreignObject＆gt;处理Chrome中的预期但不是Firefox </textarea>

1 个答案: