Use of Foreign Object

JavaScript

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500)
    .append("g");

svg.append("text")
    .attr("x", 20)
    .attr("y", 20)
    .style("fill", "red")
    .text("I am a text element under a SVG:g");

svg.append("foreignObject")
    .attr("x", 40)
    .attr("y", 40)
    .attr("width", 480)
    .attr("height", 240)
    .append("xhtml:body")
    .style("font", "14px 'Helvetica Neue'")
    .html(
    "<h1>An HTML Foreign Object in SVG</h1>" +
    "<h3>NOTE: unfortunately, I am not supported in IE</h3>" +
    "<p>And I am an HTML form element with a textarea placed under the same SVG:g as the text element above.</p>" +
    "<textarea name='myTextBox' cols='50' rows='5' style='background-color:#FCF5D8;'>" +
    "Enter some text...</textarea><br /><input type='submit' /></form>");

svg.append("text")
    .attr("x", 20)
    .attr("y", 300)
    .style("fill", "red")
    .text("And I am yet another text element under this famous SVG:g...and what is a graph without a blue circle?");

svg.append("circle")
    .attr("cx", 20)
    .attr("cy", 320)
    .attr("r", 10)
    .style("fill", "blue");