SOURCE

var values = "auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | text-top | text-bottom".split(' | ');

values.forEach(function(value) {
    var opt = document.createElement('option');
    opt.value = opt.textContent = value;
    select.appendChild(opt);
});

select.addEventListener('input', function() {
    text.setAttribute('dominant-baseline', select.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);
});

ta.addEventListener('input', function() {
    text.setAttribute('text-anchor', ta.value);
});

<select id="ta">
    <option value="start">
        start
    </option>
    <option value="end">
        end
    </option>
    <option value="middle">
        center
    </option>
</select>
<select id="select">
</select>
<svg>
    <path stroke="green" d="M 0 100.5 500 100.5 M 140 0 v 200" />
    <text id="text" x="140" y="100" fill="red" font-size="50">
        慕课网
    </text>
    <rect id="rect" stroke="blue" fill="none">
    </rect>
</svg>