title: Text decoration of SVG tspan
body: <p>I'm seeing inconsistent rendering of SVG <code>&lt;tspan&gt;</code> elements in regards to text-decoration.</p>
  
  <p>Using this simple testcase:</p>
  
  <pre><code>&lt;text font-family="Helvetica" x="0" y="50" font-size="30" text-decoration='underline overline'&gt;
    outer text
    &lt;tspan font-size="15" text-decoration="overline"&gt;tspan w. overline&lt;/tspan&gt;
  &lt;/text&gt;
  </code></pre>
  
  <h2>WebKit (~Safari 8)</h2>
  
  <p><img src="https://i.stack.imgur.com/3OQsP.png" alt="enter image description here"></p>
  
  <h2>Firefox (37)</h2>
  
  <p><img src="https://i.stack.imgur.com/kU7PZ.png" alt="enter image description here"></p>
  
  <h2>Internet Explorer (11)</h2>
  
  <p><img src="https://i.stack.imgur.com/DrVkh.png" alt="enter image description here"></p>
  
  <p><a href="http://www.w3.org/TR/SVG/text.html#TextDecorationProperties" rel="nofollow noreferrer">The section on text decoration</a> doesn't seem to explain much.</p>
  
  <blockquote>
    <p>Since ‘text-decoration’ is specified on the ‘text’ element, all text
    within the ‘text’ element has its underline rendered with the same
    fill and stroke properties as exist on the ‘text’ element (i.e., blue
    fill, red stroke), even though the various words have different fill
    and stroke property values. However, the word "different" explicitly
    specifies a value for ‘text-decoration’; thus, its underline is
    rendered using the fill and stroke properties as the ‘tspan’ element
    that surrounds the word "different" (i.e., yellow fill, darkgreen
    stroke)</p>
  </blockquote>
  
  <p>There's some clarification of fill/stroke but nothing on font size. Does this mean this is left up to implementors' decision? Is this defined/explained anywhere else?</p>