Добавить foreignObject, содержащий некоторый HTML внутри элемента SVG

javascript d3.js svg

3578 просмотра

2 ответа

6791 Репутация автора

Есть ли способ добавить foreignObjectэлемент, содержащий простой HTML, к элементу svg? Вот код, который я попробовал:

 var foreignObject = document.createElement('foreignObject');
 foreignObject.setAttribute('height', '300');
 foreignObject.setAttribute('width', '300');
 var div = document.createElement('div');
 div.innerHTML = 'Hello World';
 foreignObject.appendChild(div); 
 svg.appendChild(foreignObject); //svg is an already created svg element containing a d3 chart

Но svg остается неизменным даже после выполнения этого кода. Есть ли что-нибудь еще, что мне нужно сделать?

Автор: Tarun Dugar Источник Размещён: 18.07.2016 01:21

Ответы (2)


3 плюса

57634 Репутация автора

Решение

Вы забыли присоединить пространство имен к <foreignObject>элементу:

var ns = 'http://www.w3.org/2000/svg';
var svg = document.querySelector( 'svg' );

var foreignObject = document.createElementNS( ns, 'foreignObject');
foreignObject.setAttribute('height', 300);
foreignObject.setAttribute('width', 300);

var div = document.createElement('div');
div.innerHTML = 'Hello World';

foreignObject.appendChild( div ); 
svg.appendChild(foreignObject); //svg is an already created svg element containing a d3 chart
<svg></svg>

Автор: Sirko Размещён: 18.07.2016 01:28

2 плюса

76593 Репутация автора

Вам не нужно document.createElementNSили document.createElement, вы можете просто добавить, foreignObjectиспользуя ваш выбор D3.

Вот пример, заимствованный у Бостока, создателя D3:

<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);
svg.append("foreignObject")
    .attr("width", 480)
    .attr("height", 500)
  .append("xhtml:div")
    .style("font", "14px 'Helvetica Neue'")
    .html("<h1>An HTML Foreign Object in SVG</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. ");
</script>

Автор: Gerardo Furtado Размещён: 18.07.2016 01:33
Вопросы из категории :
32x32