javascript - 使文本适合 SVG 元素(使用 D3/JS)

Question

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

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')​

但是，如您所见 ( http://jsfiddle.net/Tmj7g/3/ )，文本被 chop 了。在创建的 svg 矩形内写一段的任何漂亮方法？谢谢，

Answer 1

this question 的答案可能是相关的。 SVG 不提供自动换行文本的方法，但您可以在 SVG 中嵌入 HTML，然后使用 div 作为示例。

我已经更新了 jsfiddle here ，但它不能很好地与动画一起工作。如果您想让它正常工作并表现得像任何其他 SVG 元素，您必须预先计算换行符并手动插入它们。