Почему в svg не отображается div?

Question

[zlodiak]

Пытаюсь встроить в svg элемент div. Использую foreignObject.

JSFIDDLE

В результате foreignObject виден(он стилизован), а сам div, ради которого это всё и делалось не виден. Точнее, div в разметке есть, но у нему не применяются стили и текст дива не выводится. Помогите пожалуйста это исправить.

js:

const svg = d3.select('#svg');

const fo = svg.append("foreignObject")
                .attr("class","fo")
                .attr("x","40")
                .attr("y","40")
                .attr("width","100")
                .attr("height","100");

fo.append('div').attr('class', 'div').html('its div');

css:

#svg {
	width: 500px;
	height: 500px;
	background: yellow;
}

.fo {
	background: maroon;
	color: red;
}

.div {
	color: green;
	background: blue;
  padding: 20px;
}

Answer 1

[0xD34F]

Надо указать пространство имён, к которому относится добавляемый элемент.

Т.е., вместо append('div') должно быть append('xhtml:div').

Если захотите добавить внутрь div'а ещё что-то - указывать пространство имён уже не нужно, по умолчанию оно наследуется от родительского элемента.