SVGの垂直方向調整プロパティ（dominant-baseline）のIE非対応および値（middle,central）の曖昧性

IEがSVGの垂直方向位置調整プロパティ（dominant-baseline）を非対応

• 以下の例の効果はIEブラウザで確認はできません（IE10でテストしました）
• 垂直方向の位置調整にIEまで適応するため、プロパティ「dy」使用することができます

dominant-baselineの設定が違う言語の文字に基準点が違います

• 各種言語の文字の基準点が違うため、dominant-baselineが alphabetic 、 ideographic 、 hanging 、 mathematical などに分けて、基準点を定めています
• 日本語の漢字でdominant-baselineの各種値をセットして、比較してみました

  <!--  SVGで「漢」をdominant-baselineで描画 -->
  <svg width=960 height=500>
    <line x1=10 x2=850 y1=200 y2=200 style="stroke: green"></line>
    <text x=926 y=200.5 style="dominant-baseline:central;fill: green; font-size: 14px;">y=0</text>
    <g class="terms" transform="translate(20,200)">
      <text x=0 dominant-baseline= "alphabetic" >漢</text>
      <text x=80 baseline-shift="-24%">漢</text>
      <text x=160 dominant-baseline="ideographic">漢</text>
      <text x=240 dominant-baseline="hanging">漢</text>
      <text x=320 dominant-baseline="mathematical">漢</text>
      <text x=400 dominant-baseline="middle">漢</text>
      <text x=480 dominant-baseline="central">漢</text>
      <text x=560 dominant-baseline="text-before-edge">漢</text>
      <text x=640 dominant-baseline="text-after-edge">漢</text>
    </g>
    <g class="labels" transform="translate(50,120)" >
      <text x=0 transform="rotate(-45)">alphabetical</text>
      <text x=80 transform="translate(10, 70),rotate(-45)">baseline-shift: -24%</text>
      <text x=130 y=100 transform="rotate(-45)">ideographic</text>
      <text x=140 y=200 transform="rotate(-45)">hanging</text>
      <text x=190 y=240 transform="rotate(-45)">mathemetical</text>
      <text x=280 y=300 transform="rotate(-45)">middle</text>
      <text x=320 y=350 transform="rotate(-45)">central</text>
      <text x=370 y=410 transform="rotate(-45)">text-before-edge</text>
      <text x=480 y=450 transform="rotate(-45)">text-after-edge</text>
    </g>
  </svg>
  
  // d3.jsで「漢」字のサイズを取得し、枠を描画
    var d = [];
    d3.selectAll('.terms text')
      .each(function() { d.push(this.getBBox()) });
    d3.select('svg .terms').selectAll('rect')
      .data(d).enter()
      .append('rect')
      .attr('x', function(d) {return d.x})
      .attr('y', function(d) {return d.y})
      .attr('width', function(d) {return d.width})
      .attr('height', function(d) {return d.height})
      .style('stroke', 'gray')
      .style('stroke-dasharray', '6 6')
      .style('fill', 'none')
  

   

• 上記例をIDでの確認はできません

dominant-baselineの値：middle, centralの基準点説明が曖昧です

• W3からのdominant-baselineプロパティの値（middle, central｝に関する説明は全く同じです。その違いは分かりません
• 漢字の描画から見ると、middle, centralの垂直位置差が確認できます
  • 値：centralの方がより正確に漢字を中心に表示させています
• また、ChromeとFirefoxでの対応差も確認できます
• 英文字では大文字と小文字の中央に表示が違うようです
  
  • 大文字：central の方がより正確に中央に表示されます
  • 小文字：middleの方がより正確に中央に表示されます