so my problem, I have added a textarea to a foreignObject and this foreignObject is part of a d3 group and when you add new line to the textarea it changes the position. How can I fix that? Here you can see what I'm talking about (hit 2 or 3 times enter) https://jsfiddle.net/jcbujyyg/1/
same code:
var svg = d3.select("body").append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 960 600")
.attr("width", "100%")
.attr("height", "100%")
.attr("style", "outline: thin solid black;")
.style("background-color", "#f4f3f1");
var group = svg.append('g')
.datum({x: 0, y: 0});
group.append("rect")
.data([{x: 200, y: 200, width: 400, height: 200}])
.attr("id", "base")
.attr("x", function (d) {return d.x;})
.attr('y', function (d) {return d.y;})
.attr('width', function (d) {return d.width;})
.attr('height', function (d) {return d.height;})
.attr("fill", "skyblue");
var inp = group.append("foreignObject")
.attr('x', 200)
.attr( 'y', 200)
.append("xhtml:body")
.attr('xmlns','http://www.w3.org/1999/xhtml')
.append('textarea')
.style("font-size" , "20px")
Before
After