SVG Text Alignment

HTML

<h2>Font position in SVG</h2>

<select id="fontName">
    <option value="Arial">Arial</option>
    <option value="Helvetica">Helvetica</option>
    <option value="Times">Times</option>
    <option value="Georgia">Georgia</option>
    <option value="sans-serif">sans-serif</option>
    <option value="serif">serif</option>
    <option value="monospace" selected>monospace</option>
</select>

<input id="fontBold" type="checkbox" checked /> <label for="fontBold">bold</label>

<svg height=400 width=340>
    <g id="svgFont" stroke-width="1" transform="translate(0.5, 20.5)" font-family="monospace" font-weight="bold">
        <!-- Labels -->
        <text fill="gray" x="18" y="110" transform="rotate(270 18 110)" text-anchor="middle" >dominant-baseline</text>
        <path stroke="green" fill="none" d="M 20,0 320,0 320,220 20,220 Z" />
        
        
        <path stroke="blue" d="M 100,0 100,320" />

        <path stroke="red" d="M 20,20 320,20" />
        <text style="dominant-baseline:auto;" x="100" y="20">Auto</text>
        
        <path stroke="red" d="M 20,40 320,40" />
        <text style="dominant-baseline:ideographic;" x="100" y="40">Ideographic (central)</text>
        
        <path stroke="red" d="M 20,60 320,60" />
        <text style="dominant-baseline:alphabetic;" x="100" y="60">Alphabetic</text>
        
        <path stroke="red" d="M 20,80 320,80" />
        <text style="dominant-baseline:hanging;" x="100" y="80">Hanging (top)</text>
        
        <path stroke="red" d="M 20,100 320,100" />
        <text style="dominant-baseline:mathematical;" x="100" y="100">Mathematical (x-top)</text>
        
        <path stroke="red" d="M 20,120 320,120" />
        <text style="dominant-baseline:central;" x="100" y="120">Central</text>
        
        <path stroke="red" d="M 20,140 320,140" />
        <text style="dominant-baseline:middle;" x="100" y="140">Middle (x-middle)</text>
        
        <path stroke="red" d="M 20,160 320,160" />
        <text...

CSS

html{
    padding:20px;
    font-family: Helvetica, Arial, sans-serif;
}

JavaScript

$(function(){
    $('#fontName').change(function(){
        var fontFamily = $('#fontName option:selected').attr('value');
        $('#svgFont').attr('font-family', fontFamily);
    });
    
    $('#fontBold').change(function(){
        var bold = ($(this).prop( "checked" )) ? "bold" : "normal";
        $('#svgFont').attr('font-weight', bold);
    });
});