@zlodiak

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

Пытаюсь встроить в 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;
}
  • Вопрос задан
  • 1178 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Надо указать пространство имён, к которому относится добавляемый элемент.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы