<textarea> inside <foreignObject> handles as expected in Chrome but not Firefox

Question

I create a text box inside a foreignObject in SVG as follows:

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

This works great in Chrome. However, in Firefox I do not see the text area at all. When I check Firebug, it exists, but firefox forces it statically to position it, and depending on how I scroll the highlighted field from hovering over an object in the html tab, not necessarily even inside svg. Even when this is the case, I do not see the text box. What can I do to fix this in Firefox? For reference, I use the latest versions of both browsers (updated a few hours ago).

Answer 1

Works for me if I change this line:

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

For this:

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

I think Firefox is just more strict about namespaces. This may be a mistake, but it does mean that it is accepted to require http://www.w3.org/2000/xmlns/ to process the DOM:

The xmlns: prefix was specified as a syntax device for declaring namespaces, but was not itself associated with any namespace namespace namespace specification in January 1999. But in some processing contexts, such as the DOM , it is useful to represent all XML attributes as (namespace name, local name). For this purpose, the namespace name is http://www.w3.org/2000/xmlns/ .