Question

I’m creating a textarea inside a foreignObject in an 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 fine in Chrome. However, in Firefox, I can’t see the textarea at all. When I check with Firebug, it does exist, but firefox has forced static positioning on it, and depending on how I scroll, the highlighted box from hovering over the object in the html tab isn’t necessarily even inside the svg. Even when it is, I can’t see the textarea. What can I do to fix this in Firefox? For reference, I’m using the newest 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/");

To this:

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

I think Firefox is just being more strict about the namespaces. It could be a bug, but this indicates it’s accepted to require the http://www.w3.org/2000/xmlns/ for DOM processing:

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