SVG Textの縦方向描画位置を調整する

SVG Textの横方向の描画位置を調整する手段としてtext-anchor属性があります。text-anchorを使うことで、x=0の点をtextの左端、中央、右端に変更することができます(以下参照)。

• text-anchor
• SVG Textのtext-anchor属性をつかってみた。

同じように、縦方向の描画位置を調整する、すなわちy=0の点がtextのどこにあたるかを調整する属性としてdominant-baselineを使うことができそうです。

text-anchorには12種類の値を設定することができます。D3.jsを使って全パターンを描画させてみました。

var texts = [
    'abcdefg',
    'ほげほげ'
];
var params = [
    'auto',
    'use-script',
    'no-change',
    'reset-size',
    'ideographic',
    'alphabetic',
    'hanging',
    'mathematical',
    'central',
    'middle',
    'text-after-edge',
    'text-before-edge'
];
var textWidth = 120;
var width = textWidth * params.length;
var height = 500;

var svg = d3.select('body')
    .append('svg')
    .attr({
        width: width,
        height: height
    });

svg.selectAll('text')
    .data(params)
    .enter()
    .append('text')
    .text(function(param) {
        return param;
    })
    .attr({
        x: function(_, i) {
            return textWidth * i;
        },
        y: 50
    });

var line = svg.selectAll('g')
    .data(texts)
    .enter()
    .append('g')
    .attr('transform', function(_, i) {
        return 'translate(0,' + (100 * i + 150) + ')';
    });
line.append('line')
    .attr({
        x1: 0,
        y1: 0,
        x2: width,
        y2: 0,
        stroke: 'black'
    });
line.selectAll('text')
    .data(function(text) {
        return params.map(function(param) {
            return {
                text: text,
                param: param
            };
        });
    })
    .enter()
    .append('text')
    .text(function(d) {
        return d.text;
    })
    .attr({
        'dominant-baseline': function(d) {
            return d.param;
        },
        x: function(_, i) {
            return textWidth * i;
        },
        y: 0
    });

動作結果は http://jsfiddle.net/likr/4z6mX/ のようになります。