textAlign.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <select id="ta">
    <option value="start">start</option>
    <option value="end">end</option>
    <option value="middle">center</option>
  </select>
  <select id="select">
     <option value="top">top</option>
     <option value="middle">middle</option>
     <option value="bottom">bottom</option>
  </select><br><br><br>
  <svg x="100" y="100" width="100%" height="200" >
    <path stroke="green" d="M 0 100.5 500 100.5 M 140 0 v 200" transform="translate(100,0)"/>
    <text id="text" x="140" y="100" fill="red" font-size="50" transform="translate(100,0)">没汁帅</text>
    <rect id="rect" stroke="blue" fill="none" transform="translate(100,0)"></rect>
  </svg>
  <script type="text/javascript">
    select.addEventListener('input', function() {
      text.setAttribute('dy', 0);
      var dy = getAlignmentDy(select.value);
      text.setAttribute('dy', dy);
      var box = text.getBBox();
      rect.setAttribute('x', box.x);
      rect.setAttribute('y', box.y);
      rect.setAttribute('width', box.width);
      rect.setAttribute('height', box.height);
    });
    ta.addEventListener('input', function() {
      text.setAttribute('text-anchor', ta.value);
      var box = text.getBBox();
      rect.setAttribute('x', box.x);
      rect.setAttribute('y', box.y);
      rect.setAttribute('width', box.width);
      rect.setAttribute('height', box.height);
    });
    function getAlignmentDy(value) {
      var box = text.getBBox();
      var y = +text.getAttribute('y');
      switch(value) {
        case 'top': return y - box.y;
        case 'middle': return y - (box.y + box.height / 2);
        case 'bottom': return y - (box.y + box.height);
      }
    }
  </script>
</body>
</html>