Edit in JSFiddle

<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 style="dominant-baseline:text-after-edge;" x="100" y="160">Text-after-edge</text>
        
        <path stroke="red" d="M 20,200 320,200" />
        <text style="dominant-baseline:text-before-edge;" x="100" y="200">Text-before-edge</text>
        
        <text fill="gray" x="18" y="280" transform="rotate(270 18 280)" text-anchor="middle" >text-anchor</text>
        <path stroke="green" fill="none" d="M 20,240 320,240 320,320 20,320 Z" />
        
        <path stroke="red" d="M 20,260 320,260" />
        <text text-anchor="start"  x="100" y="260">Start</text>
    
        <path stroke="red" d="M 20,280 320,280" />
        <text text-anchor="middle" x="100" y="280">Middle</text>
    
        <path stroke="red" d="M 20,300 320,300" />
        <text text-anchor="end"    x="100" y="300">End</text>
    </g>

</svg>