[svg] Shows the difference between 'dy' and 'baseline-shift' in <tspan>

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <svg width="250" height="40" viewBox="0 0 250 40"
        xmlns="http://www.w3.org/2000/svg" version="1.1">
      <text x="15" y="30">
        <tspan>You</tspan>
        <tspan style="baseline-shift: -10">are</tspan> 
        <tspan dy="10">not</tspan> 
        <tspan dy="-10">a</tspan>
        <tspan>banana</tspan>
      </text>
    </svg>
  </body>

</html>

// Code goes here

text {
  font: 20px Verdana, Helvetica, Arial, sans-serif;
}

Shows the difference between [dy](https://tr.im/dy_) and [baseline-shift](https://tr.im/baseline-shift) in [<tspan>](https://tr.im/tspan)