title: svg.js: horizontally offset newline tspans to create staggered appearance
body: <p>Is there a proper way to horizontally offset tspans in each new line? I want to create a stagger effect, so that all new line is offset the width of the preceding line e.g.:</p>
  
  <pre><code>sentence 1
            sentence 2
                      sentence 3 
                                etc
  </code></pre>
  
  <p>I have to following which gives me a text block where all the lines begin at the same x position:</p>
  
  <pre><code>let content = SVG('text-box'); // initialize svg element
  let sentences = ["sentence 1", "sentence 2", "sentence 3"];
  
  // create a text block
  let text_block = content.text(function (add) {
      // create tspans for every sentence
      for (let i = 0; i &lt; sentences.length; i++) {
          add.tspan(sentences[i]).newLine(); 
      }
  });
  </code></pre>
  
  <p>I know that this easily doable with pure html and css only, but it has to be as svg element, so that I can add horizontal flowing animations later on. All the staggered lines should then flow from right to left.</p>