Question

是否可以在创建/添加foreignObject（<textarea>）之后更改其大小？或者我是否需要删除它并添加一个所需大小的新？我尝试了.attr("width", x)和.style("width", x)，但没有任何变化。有某种伎俩还是根本不可能？在最新的镀铬下测试。

Answer 1

是的，可以更改textarea大小，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>

是否可以在创建foreignObject后更改它的大小？

1 个答案: