title: ngx-graph svg:text line breaks
body: <p>I hope this helps somebody some time. I am still without a solution, however this may generate some conversations into one and save others time in the time I've already put in.</p>
  <p>I am using <a href="https://swimlane.github.io/ngx-graph/" rel="nofollow noreferrer">ngx-graph</a> where is uses d3.js and therefore it has a svg canvas to present the graphical output. On the ngx-graph nodes you have a make up of properties, in particular the label attribute. The label outputs on the svg as a single line, however I want this line to be broken up either by having <code>&lt;br/&gt;</code> tags in the string or any other means.</p>
  <p><strong>Node data:</strong></p>
  <pre><code>export const nodes: any[] = [
    {
      id: '123',
      label: 'This is &lt;br/&gt; a node for &lt;br/&gt; Tom',
    },
  ];
  </code></pre>
  <p><strong>Markup view</strong></p>
  <pre><code>&lt;svg:text
     id=&quot;tom&quot;
     alignment-baseline=&quot;central&quot;
     [attr.x]=&quot;10&quot;
     [attr.y]=&quot;node.dimension.height / 2&quot;
     [innerHTML]=&quot;node.label&quot;
   &gt;
      &lt;!--{{ node.label }}--&gt;
   &lt;/svg:text&gt;
  </code></pre>
  <p><code>{{ node.label }}</code> simply presents to string with the markup in e.g. <code>'This is &lt;br/&gt; a node for &lt;br/&gt; Tom'</code>. By using <code>[innerHTML]=&quot;node.label&quot;</code> it takes the <code>&lt;br/&gt;</code> tags out but does not start a new line. It does however leave it in the src code, so I did try and force a new line by grabbing hold of this tag and implemeting some CSS <code>::after e.g. white-space: pre; content: &quot;\a&quot;</code> but this didn't work.</p>
  <p>Other things attemped:</p>
  <p><code>&lt;foreignObject&gt;</code> - Using the above to wrap the <code>&lt;svg:text&gt;</code> node, i read this should allow you to pass html in the svg.</p>
  <p>Using a <code>DomSanitizer</code> pipe for the html to be safe.</p>
  <p>Running the output through regex to convert the tags in whitespace.</p>
  <p>Finally, I will reference this <a href="https://stackoverflow.com/questions/475804/svg-word-wrap-show-stopper">SVG Word Wrap - Show stopper?</a> as a potential candidate to get a solution, but haven't yet figured it out. I think I can identify the <code>&lt;br&gt;</code> tags in the string, run it through a function to generate something like the below:</p>
  <pre><code>&lt;text transform=&quot;matrix(1 0 0 1 355.2294 118.67)&quot; class=&quot;st6&quot;&gt;
      &lt;tspan x=&quot;0&quot; y=&quot;0&quot; class=&quot;st3 st4 st5&quot;&gt;SOME&lt;/tspan&gt;
      &lt;tspan x=&quot;-24.8&quot; y=&quot;12&quot; class=&quot;st3 st4 st5&quot;&gt;TEXT&lt;/tspan&gt;
  &lt;/text&gt;
  </code></pre>
  <p>This will basically put a <code>&lt;tspan&gt;</code> line for every bit of string either side of the break tag and then get it back onto my svg graph. If anybody can get to this implementation before I can that would be a big help! Here is a <a href="https://stackblitz.com/edit/ngx-graph-demo-tghc5f?file=src/app/app.component.html" rel="nofollow noreferrer">stackBlitz</a> I've been playing with.</p>