|
|
|
|
|
by nxn
4815 days ago
|
|
I actually implemented a very primitive word wrap function specifically for wrapping text in SVGs about two weeks ago. I took the approach of keeping an single canvas object in memory (completely detached from the DOM, 1x1 pixel dimensions) and using its "measureText" method for calculating string lengths. This made the algorithm fairly simple, and if you set the font on the canvas context correctly, the results will actually be fairly accurate -- though you might have to take into account any scaling that you have applied on the SVG. This approach did not cause any noticeable change in performance, at least not in my use case where there are at most around 100 nodes of text that needed word wrapping. I can't really compare it with other approaches since I saw no need to take multiple stabs at the problem when my first attempt proved to work well enough. I would guess that it might be faster than actually creating SVG text elements and then trying to get their widths since you're eliminating a lot of overhead in the pre-calculation phase. Also, as far as desktop browsers go, anything that has SVG also has canvas, so there were no worries there about browser compatibility issues. EDIT: But yeah, I'm just mentioning this in case you find some use for it. Looking at your link I would say you're much better off just using foreignObject. |
|