Javascript 将文本放入SVG元素（使用D3/JS）

我想在我创建的矩形中写入文本，如下所示：

body = d3.select('body')

svg = body.append('svg').attr('height', 600).attr('width', 200)

        rect = svg.append('rect').transition().duration(500).attr('width', 150)
                        .attr('height', 100)
                        .attr('x', 40)
                        .attr('y', 100)
                        .style('fill', 'white')
                        .attr('stroke', 'black')

        text = svg.append('text').text('This is some information about whatever')
                        .attr('x', 50)
                        .attr('y', 150)
                        .attr('fill', 'black')​

但是，如您所见（）文本被截断。在创建的svg矩形内编写段落有什么好方法吗？谢谢，

的答案可能是相关的。SVG不提供自动包装文本的方法，但您可以在SVG中嵌入HTML，然后使用

div

---

我已经更新了JSFIDLE，但它与动画的配合效果不太好。如果您想使其正常工作并像任何其他SVG元素一样工作，则必须预先计算换行符并手动插入它们。

要使其与动画一起工作，只需将其包含在一个组元素中，并对该组元素设置动画即可。

body=d3.选择（'body'））
svg=body.append（'svg'）
.attr（'height'，600）
.attr（'宽度'，200）；
var g=svg.append（'g'）.attr（“转换”，“缩放（0）”）；
rect=g.append（'rect'）
.attr（'width'，150）
.attr（'height'，100）
.attr（'x'，40）
.attr（'y'，100）
.style（'填充'，'无'）
.attr（'笔划'，'黑色'）
text=g.append（'foreignObject'）
.attr（'x'，50）
.attr（'y'，130）
.attr（'width'，150）
.attr（'height'，100）
.append（“xhtml:body”）
.html（'这是关于任何内容的一些信息'）
g、 transition（）.duration（500.attr）（“transform”，“scale（1）”）；

这项技术可能会派上用场。 它适用于当前的svg规范，并且不包含foreignObject元素

---

我也遇到了类似的问题，通过计算箱子的宽度找到了一个合理的解决方案。 其次，我计算出当前字体的平均字符宽度约为8。 接下来，我只需在要显示的文本上做一个子字符串。 在大多数情况下，这似乎都很有效

var rectText = rectangles.append("text")
    .text(function(d) {

        TextBoxLength = timeScale(dateFormat.parse(d.endTime)) - timeScale(dateFormat.parse(d.startTime));
        return d.task.substring(0, Math.floor(TextBoxLength / 8));
    })
    .attr("x", function(d) {
        return (timeScale(dateFormat.parse(d.endTime)) - timeScale(dateFormat.parse(d.startTime))) / 2 + timeScale(dateFormat.parse(d.startTime)) + theSidePad;
    })
    .attr("y", function(d, i) {
        return d.position * theGap + 14 + theTopPad;
    })
    .attr("font-size", 12)
    .attr("text-anchor", "middle")
    .attr("text-height", theBarHeight)
    .attr("fill", "#000000");

---

另一种方法是，在尝试将直线文本放入svg元素时，可以使用以下策略：

---

这对IE9有用吗？如果是的话，有什么替代方案？我知道这个问题很久以前就得到了回答。是的，它在IE9中根本不起作用，因为它不支持外来对象。除了在D3.js中包装文本，还有其他选择吗？这不是D3而是SVG的问题。如果您不需要花哨的图形，您可以简单地生成HTML。如果您需要SVG，您可以使用它的tspan元素来包装文本，例如，但这要方便得多。虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效

var rectText = rectangles.append("text")
    .text(function(d) {

        TextBoxLength = timeScale(dateFormat.parse(d.endTime)) - timeScale(dateFormat.parse(d.startTime));
        return d.task.substring(0, Math.floor(TextBoxLength / 8));
    })
    .attr("x", function(d) {
        return (timeScale(dateFormat.parse(d.endTime)) - timeScale(dateFormat.parse(d.startTime))) / 2 + timeScale(dateFormat.parse(d.startTime)) + theSidePad;
    })
    .attr("y", function(d, i) {
        return d.position * theGap + 14 + theTopPad;
    })
    .attr("font-size", 12)
    .attr("text-anchor", "middle")
    .attr("text-height", theBarHeight)
    .attr("fill", "#000000");

node.append("text")
  .text(function(d) { return d.name; })
  .style("font-size", function(d) { return Math.min(2 * d.r, (2 * d.r - 8) / this.getComputedTextLength() * 24) + "px"; })
  .attr("dy", ".35em");