How to linebreak an svg text within javascript

Question

So here is what I have    lt path class       onmousemove  show tooltip event  very long text         n I would like to linebreak    onmouseout  hide tooltip    d        gt    lt rect class  tooltip bg  id  tooltip bg        gt   lt text class  tooltip  id  tooltip      gt Tooltip lt  text gt    lt script gt   lt   CDATA  function show tooltip e text        var tt   document getElementById  tooltip        var bg   document getElementById  tooltip bg            set position          tt textContent text       bg setAttribute  width  tt getBBox   width 10       bg setAttribute  height  tt getBBox   height 6           set visibility             Now my very long tooltip text doesn t have a linebreak  even though if I use alert    it shows me that the text actually DOES have two lines   It contains a     though  how do I remove that one by the way   I can t get CDATA to work anywhere

User · Answer

I suppese you alredy managed to solve it, but if someone is looking for similar solution then this worked for me:

 g.append('svg:text')
  .attr('x', 0)
  .attr('y', 30)
  .attr('class', 'id')
  .append('svg:tspan')
  .attr('x', 0)
  .attr('dy', 5)
  .text(function(d) { return d.name; })
  .append('svg:tspan')
  .attr('x', 0)
  .attr('dy', 20)
  .text(function(d) { return d.sname; })
  .append('svg:tspan')
  .attr('x', 0)
  .attr('dy', 20)
  .text(function(d) { return d.idcode; })

There are 3 lines separated with linebreak.

User · Answer

With the tspan solution  let s say you don t know in advance where to put your line breaks  you can use this nice function  that I found here  http   bl ocks org mbostock 7555321  That automatically does line breaks for long text svg for a given width in pixel   function wrap text  width      text each function         var text   d3 select this           words   text text   split   s    reverse            word          line               lineNumber   0          lineHeight   1 1     ems         y   text attr  y            dy   parseFloat text attr  dy             tspan   text text null  append  tspan   attr  x   0  attr  y   y  attr  dy   dy    em        while  word   words pop            line push word         tspan text line join              if  tspan node   getComputedTextLength    gt  width            line pop            tspan text line join                line    word           tspan   text append  tspan   attr  x   0  attr  y   y  attr  dy     lineNumber   lineHeight   dy    em   text word

User · Answer

I have adapted a bit the solution by  steco  switching the dependency from d3 to jquery and adding the height of the text element as parameter  function wrap text  width  height      text each function idx elem        var text     elem       text attr  dy  height           var words   text text   split   s    reverse            word          line               lineNumber   0          lineHeight   1 1     ems         y   text attr  y            dy   parseFloat  text attr  dy              tspan   text text null  append  tspan   attr  x   0  attr  y   y  attr  dy   dy    em        while  word   words pop            line push word         tspan text line join              if  elem getComputedTextLength    gt  width            line pop            tspan text line join                line    word           tspan   text append  tspan   attr  x   0  attr  y   y  attr  dy     lineNumber   lineHeight   dy    em   text word

User · Answer

use HTML instead of javascript   x000D   x000D   lt html gt  x000D     lt head gt  lt style gt      margin  0  padding  0     lt  style gt  lt  head gt  x000D     lt body gt  x000D       lt h1 gt svg foreignObject to embed html lt  h1 gt  x000D   x000D       lt svg x000D        xmlns  http   www w3 org 2000 svg  x000D        viewBox  0 0 300 300  x000D        x  0  y  0  height  300  width  300  x000D       gt  x000D   x000D         lt circle x000D          r  142  cx  150  cy  150  x000D          fill  none  stroke   000000  stroke-width  2  x000D          gt  x000D   x000D         lt foreignObject x000D          x  50  y  50  width  200  height  200  x000D         gt  x000D           lt div x000D            xmlns  http   www w3 org 1999 xhtml  x000D            style   x000D              width  196px  height  196px  x000D              border  solid 2px  000000  x000D              font-size  32px  x000D              overflow  auto     scroll    x000D              x000D           gt  x000D             lt p gt this is html in svg 1 lt  p gt  x000D             lt p gt this is html in svg 2 lt  p gt  x000D             lt p gt this is html in svg 3 lt  p gt  x000D             lt p gt this is html in svg 4 lt  p gt  x000D           lt  div gt  x000D         lt  foreignObject gt  x000D   x000D       lt  svg gt  x000D   x000D   lt  body gt  lt  html gt  x000D   x000D   x000D

User · Answer

This is not something that SVG 1 1 supports  SVG 1 2 does have the textArea element  with automatic word wrapping  but it s not implemented in all browsers  SVG 2 does not plan on implementing textArea  but it does have auto-wrapped text   However  given that you already know where your linebreaks should occur  you can break your text into multiple  lt tspan gt s  each with x  0  and dy  1 4em  to simulate actual lines of text  For example    lt g transform  translate 123 456   gt  lt  -- replace with your target upper left corner coordinates -- gt     lt text x  0  y  0  gt       lt tspan x  0  dy  1 2em  gt very long text lt  tspan gt       lt tspan x  0  dy  1 2em  gt I would like to linebreak lt  tspan gt     lt  text gt   lt  g gt    Of course  since you want to do that from JavaScript  you ll have to manually create and insert each element into the DOM

User · Answer

I think this does what you want   function ShowTooltip evt  mouseovertext          Make tooltip text             var tooltip text   tt childNodes item 1       var words   mouseovertext split     n        var max length   0       for  var i 0  i lt 3  i             tooltip text childNodes item i  firstChild data   i lt words length    words i                 length   tooltip text childNodes item i  getComputedTextLength            if  length  gt  max length   max length   length              var x   evt clientX   14   max length 2      var y   evt clientY   29      tt setAttributeNS null  transform    translate     x         y                Make tooltip background     bg setAttributeNS null  width   max length 15       bg setAttributeNS null  height   words length 15 6       bg setAttributeNS null  x  evt clientX 8       bg setAttributeNS null  y  evt clientY 14           Show everything     tt setAttributeNS null  visibility   visible        bg setAttributeNS null  visibility   visible        It splits the text on    n and for each puts each fragment in a tspan  Then it calculates the size of the box required based on the longest length of text and the number of lines  You will also need to change the tooltip text element to contain three tspans    lt g id  tooltip  visibility  hidden  gt       lt text gt  lt tspan gt x lt  tspan gt  lt tspan x  0  dy  15  gt x lt  tspan gt  lt tspan x  0  dy  15  gt x lt  tspan gt  lt  text gt   lt  g gt    This assumes that you never have more than three lines  If you want more than three lines you can add more tspans and increase the length of the for loop

[javascript] How to linebreak an svg text within javascript?

Examples related to javascript

Examples related to svg

Examples related to newline

Examples related to line-breaks