javascript - 创建foreignObject后是否可以更改其大小？

Question

是否可以更改 foreignObject 的大小( <textarea> ) 创建/添加后？或者我是否需要将其删除并添加一个具有所需尺寸的新的？我试过.attr("width", x)和.style("width", x)但根本没有改变。是否有某种技巧或者根本不可能？在最新的 chrome 下测试。

Answer 1

是的，可以更改文本区域大小，并且 style("width", x) 确实有效。但是，例如，它必须是 "100px" 而不是 100。

这是一个演示:

var svg = d3.select("svg");

var foreign = svg.append("foreignObject")
  .attr('x', 50)
  .attr('y', 20);

var textarea = foreign.append("xhtml:textarea")
  .style("width", "40px")
  .style("height", "40px")
  .style("background-color", "wheat")
  .html("This is a textarea inside a foreign object");

textarea.transition()
  .duration(3000)
  .style("width", "200px")
  .style("height", "100px")

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

你也可以使用"rows"和"cols"，但结果不太好:

var svg = d3.select("svg");

var foreign = svg.append("foreignObject")
  .attr('x', 50)
  .attr('y', 20);

var textarea = foreign.append("xhtml:textarea")
  .attr("rows", 5)
  .attr("cols", 5)
  .style("background-color", "wheat")
  .html("This is a textarea inside a foreign object");

textarea.transition()
  .duration(3000)
  .attr("rows", 8)
  .attr("cols", 20)

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>