title: Truncating svg text to fit a rect
body: <p>What i need is to truncate a text so that it fills the size of a <code>svg</code> rectangle and then popup to its full-size on <code>mouse-over</code>.
  I have tried with css using the following code to hide the text and then popup but it doesnt seem to work.</p>
  
  <pre><code>#text_trunc {
      width: 100px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }
  
  #text_trunc:hover{
      overflow: visible; 
      white-space: normal; 
      width: auto;
      position: absolute;
      background-color: rgba(0,0,0,0);
  }
  </code></pre>
  
  <p>I have created all the <code>svg</code> elements using <code>javascript</code> and this is where i create an <code>id</code> for the text element</p>
  
  <p><code>text.setAttributeNS(null, "id", "text_trunc");</code></p>
  
  <p>My best guess is that <code>svg</code> creates an image which cannot be truncated by <code>css</code>...still need a solution. Thanks in advance</p>