block by nitaku 62f9489f6ab52e703400

Labels with line wrap (HTML in SVG)

Full Screen

This example shows a way to obtain line-wrapping labels using HTML code within SVG code, thanks to the foreignObject tag. Fundamental sections of the code come from this StackOverflow discussion.

Some comments: It is unclear (to me at least) how the whole XML namespace mess should be translated into HTML5, but the example as it is now is working at least on Chrome 36. A strange behavior I noticed is that the body element is omitted by the DOM, causing some discrepancies between HTML and CSS selectors.

index.html

index.css