将文本适合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')​

a href =http://jsfiddle.net/Tmj7g/3/> 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没有自动包装文本的方法，但是你可以在SVG中嵌入HTML，然后使用 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屋！