.append() and .select() behave strangely with SVG foreignObject

[dobbs]

Several examples are included in this one gist:
http://bl.ocks.org/dobbs/af2b436fc169a1d39e01

Description of the symptoms:

1. Although I can add a , in chrome and safari, I cannot subsequently select and modify that element, though firefox works. It only works in firefox when I use camelCase for the "foreignObject"
2. If I .append("foreignobject") (note: all lowercase, not camelCase), the inspectors show the DOM having changed, but the elements are not rendered.
3. If I .append("foreignObject") (note: camelCase), the inspectors render the tag in lowercase, but I cannot subsequently select and modify those elements using a lowercase selector.

What I think would be correct:
Because all three browsers display these SVG DOM elements in lowercase in their respective inspectors, .append() and .select() (and .selectAll()) should accept lowercase for "foreignobject".

[jasondavies]

Related #1235.

There’s a long-standing WebKit bug, which means that you can’t select SVG camelCase elements; as a workaround you have to use something else e.g. CSS classes.

SVG is case-sensitive (despite what the inspector might lead you to believe), so lowercase elements won’t work.