d3 svg foreignObject

Forked from http://jsfiddle.net/R9e3Y/29/ related to http://stackoverflow.com/q/13848039/4402222

by Ram Tobolski

HTML

<html>
    <head>
<script src="http://d3js.org/d3.v2.js"></script>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>

CSS

.innerdiv {
    color:red;
}

.innerdiv span {
    padding: 0 10px;
}

input[type="checkbox"] {
    width: 10px;
    height: 10px;
}

foreignObject {
    border: 1px yellow solid;
}

svg {
    border: 1px orange solid;
}

.innerdiv a {
    color: blue;
    cursor: pointer;
}

JavaScript

function go() {
var cont = d3.select("#container").html("")
    .append("svg")
    .attr("xmlns","http://www.w3.org/2000/svg")
    .attr("width","200")
    .attr("height","200");

    console.log(cont);
                      
var div = cont.append("foreignObject").attr("x","40").attr("y","40")
    .attr("width","100").attr("height","100")
    .append("xhtml:div")
    .attr("class", "innerdiv");

    div.append("span")
    .text("test");
    
    div.append("a")
    .on("click", function() { alert('hi!'); })
    .text("Click me");
    
    div.append("input").attr("type", "checkbox");
}
    go();