foreignObj alignment

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<div id="chart"></div>

CSS

#chart { border: 1px solid green;}
svg { background: #AABBFF; border: 2px solid #8899EE;}

JavaScript

var svg = d3.select("#chart").append("svg")
        .attr("width", 200)
        .attr("height", 200);
    
    let y=40;
                svg.append("g")
                .append("foreignObject")
                .attr("x", "4ex")
                .attr("y", y)
                .attr("width", 75)
                .attr("height", 25)
                .append("xhtml:body")
                .html("<form><input type=checkbox id=check/>text1</form>");
            //seems I must render this outside the foreignObject in order to match font rendering of the svg
            svg.append("g")
                .append("text")
                .attr("y", y)
                .attr("height", 25)
                .attr("x", "7ex")
                .text("text2")
    
    // svg repositioning
    $("svg").css({top: 200, left: 200, position:'absolute'});