CODEWITHSUNDEEP
htmlsvgd3.js
George Mauer
George Mauer

Reputation: 122232

Svg- foreignObject placed with d3 does not render

Check out my jsbin here

I would like some wrapping text. Following the recommendation from this post I created a foreignObject and appended it with a 'p' element.

My text does not show up at all.

Now, when I do the EXACT SAME thing in markup it shows (I just take the generated svg code and plop it into the svg body).

Heck, if I right go to devtools, right click on the svg, choose "edit as html" and insert a new line before the </svg> closing brace, my text shows up.

What gives?

Upvotes: 2

Views: 1172

Answers (1)

Robert Longson
Robert Longson

Reputation: 124324

Replace

 .append('p')
    .attr('xmlns', 'http://www.w3.org/1999/xhtml')

with

.append('xhtml:p')

Namespaces are special things when creating nodes in javascript and can't be treated as attributes. d3 uses the above syntax to cope with that.

Upvotes: 5

Related Questions