|
|
|
|
|
by moqups
4813 days ago
|
|
At Moqups ( https://moqups.com ) we've been through a very painful process of trying to implement a word wrap component in SVG and after a few months decided to throw it out and use foreignObject. We decided that it's impossible to be able to cover the thousands of text handling scenarios for all the languages and scripts out there and the performance makes it very unfeasible beyond a few hundred words. With few exceptions related to measuring text across browsers/operating systems, this was a very good decision. Sadly it's also the main reason for why we're not planning to support any version of IE moving forward although many users request it. Slightly unrelated, but I'm also happy to see getStrokeBBox in there. It's been a total pain to manually compute the stroked bbox of each stencil so the layout engine can properly arrange each element in respect to its painted area. |
|
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.