<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>
?? ?<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">慕課網(wǎng)</text>
?? ??? ?<rect id="rect" stroke="blue" fill="none"></rect>
??? </svg>
??? <script>
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);
?? ?
});

function getAlignmentDy(value){
?? ?var box = text.getBBox();
?? ?var y = text.getAttribute('y');
?? ?console.log(y,box.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>