Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
36
rated 0 times [  43] [ 7]  / answers: 1 / hits: 39739  / 12 Years ago, wed, june 13, 2012, 12:00:00

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


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,


More From » text

 Answers
18

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.



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.


[#84949] Tuesday, June 12, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
shantelc

Total Points: 737
Total Questions: 120
Total Answers: 104

Location: Nicaragua
Member since Tue, Dec 8, 2020
4 Years ago
;