D3 Examples - Labels with line wrap (HTML in SVG)

Labels with line wrap (HTML in SVG)

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.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Labels with line wrap (HTML in SVG)" />
        <title>Labels with line wrap (HTML in SVG)</title>
        <link type="text/css" href="index.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.js"></script>
    </head>
    <body>
        <svg height="500" width="960">
          <circle r="50" cx="200" cy="150" fill="teal"/>
          
          <foreignObject class="label" x="230" y="170" width="200" height="300">
            <body xmlns="https://www.w3.org/1999/xhtml">
              <div>This is not a circle.<br>This is a <b>label</b> for the circle.</div>
            </body>
          </foreignObject>
          
          <circle r="100" cx="650" cy="310" fill="orange"/>
          
          <foreignObject class="label" x="700" y="350" width="200" height="300">
            <body xmlns="https://www.w3.org/1999/xhtml">
              <div>This is a <i>longer</i> label.<br>I really don't know how to fill these lines with meaningful text, so I'll keep writing nonsense.</div>
            </body>
          </foreignObject>
        </svg>
        <script src="index.js"></script>
    </body>
</html>
    