title: How to display multiple lines of text in SVG?
body: <p>Is it possible to display multiple lines of text in SVG without using the <code>dy</code> property? I'm using SVG 1.1 but might be able to use 1.2. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;text x="0" y="15" font-size="15"&gt;
      &lt;tspan&gt;tspan line 1&lt;/tspan&gt;
      &lt;tspan&gt;tspan line 2&lt;/tspan&gt;
      &lt;tspan&gt;tspan line 3&lt;/tspan&gt;
    &lt;/text&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've typed the code above. I want the text all flush to the left and each <code>tspan</code> to be a new line. Is <code>tspan</code> the only tag I can use? I want SVG to position the text lines vertically with line breaks. I do not want to manually enter the <code>dy</code>.</p>
  
  <p>According to what I've read, each line should appear below the other. They are but they are also staggered across. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
    &lt;text x="0" y="0" font-size="15"&gt;
      &lt;tspan dy="15"&gt;tspan line 1&lt;/tspan&gt;
      &lt;tspan dy="15"&gt;tspan line 2&lt;/tspan&gt;
      &lt;tspan dy="15"&gt;tspan line 3&lt;/tspan&gt;
    &lt;/text&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I guess it is required to add the <code>x</code> property. If you are setting the <code>dy</code> property to a fixed value, what happens when you change the font size? </p>
  
  <p>This is working better than what I started with: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       xml:space="preserve"&gt;
    &lt;text x="0" y="0" font-size="15" font-family="courier new" dy="0"&gt;
      &lt;tspan x="0" dy="15"&gt;tspan line 1&lt;/tspan&gt;
      &lt;tspan x="0" dy="15"&gt;tspan line 2&lt;/tspan&gt;
      &lt;tspan x="0" dy="15"&gt;tspan line 3&lt;/tspan&gt;
    &lt;/text&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a way to apply the <code>x</code> and <code>dy</code> to all the <code>tspan</code>s? Maybe a property like <code>line-height</code> on the <code>text</code> element? </p>
  
  <p>It doesn't look like the text tag has a property to set the delta y. It has been suggested in the comments to use JQuery to set the <code>x</code> attribute of all <code>tspan</code>s. It looks like the <code>dy</code> property can accept other types of values such as points and percentages!? Is there a way to set the <code>dy</code> to a value that is 120% of the font size of its parent text element? I've tried to set it to 120%, but it doesn't seem to work like I expect. When I set 120% in the <code>dy</code> property, it goes off the screen. When I set it to <code>12</code> or <code>12px</code> it stays in the same position. If I set it to <code>12%</code>, it shifts slightly but is not 120% or 12px. </p>
  
  <p><a href="http://codepen.io/anon/pen/PqBRmd" rel="noreferrer">http://codepen.io/anon/pen/PqBRmd</a>  </p>
  
  <p>It looks like it can accept any of the following:<br>
  <a href="http://www.w3.org/TR/SVG/types.html#InterfaceSVGLength" rel="noreferrer">http://www.w3.org/TR/SVG/types.html#InterfaceSVGLength</a>  </p>
  
  <p>I've also looked up acceptable value types for <code>dy</code> and <code>dx</code>, and I can't make sense of it <a href="http://www.w3.org/TR/SVG/text.html#TSpanElementDXAttribute" rel="noreferrer">http://www.w3.org/TR/SVG/text.html#TSpanElementDXAttribute.</a> </p>
  
  <p><strong>UPDATE 4:</strong><br>
  Thanks for the answers so far. It looks like there is a way to display multiple lines of text spaced apart relatively. See my answer below.</p>