使文本适合 SVG 元素(使用 D3/JS) [英] Fit Text into SVG Element (Using D3/JS)

问题描述

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

I want to write text inside a rectangle I create as follows:

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/) 文本被剪切离开.在创建的 svg 矩形内写一个段落有什么好方法吗?谢谢，

However, as you can see (http://jsfiddle.net/Tmj7g/3/) the text gets cut off. Any nifty ways to write a paragraph inside of the svg rectangle created? Thanks,

推荐答案

的答案这个问题可能是相关的.SVG 不提供自动换行文本的方法，但您可以将 HTML 嵌入到 SVG 中，然后使用 div 例如.

The answer to this question might be relevant. SVG provides no way of wrapping text automatically, but you can embed HTML within SVGs and then use a div for example.

我已经更新了 jsfiddle 这里，但它与动画.如果您想让它正常工作并表现得像任何其他 SVG 元素，您必须预先计算换行符并手动插入它们.

I've updated the jsfiddle here, but it doesn't work that well together with the animation. If you want to make it work properly and behave like any other SVG element, you'll have to pre-compute the line breaks and insert them manually.

这篇关于使文本适合 SVG 元素(使用 D3/JS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！