SVG描画で円の中心にテキストを表示する方法

SVGのプロパティ：viewBoxが設定されたビューの伸縮/切り取り

• 結論から言うと、SVGのプロパティ：viewBoxが設定されたSVGビューの伸縮/切り取り機能をしています
  • SVGの設定ビュー(viewPort)がSVG設定のままのビューとなります
  • SVGのviewBoxが設定ビューの視点を変えて表示ます（平面的に伸縮/切り取り）
    
  • svgの定義

    //　元の画像設定
    <svg width="100" height="80">
      <circle cx="20" cy="20" r="10">
    </svg>
    
    //　拡大、切り取りの設定
    <svg width="100" height="80" viewbox="20 20 20 20">
      <circle cx="20" cy="20" r="10">
    </svg>
    

• プロパティ:viewBoxが設定された画像の投影と考えたほうがわかりやすいと思います

viewBox(x,y,width,height)のx/yは投影画像のずれ

• viewBoxの定義：viewbox( x, y, width, height ) となります
• x, yが投影されたときにのx,y軸方向のずれを設定します
  
• x, y がマイナス数値の設定ができます。それはプラスの逆方法へのずれが発生
• ずれた部分は切られて、表示されません

viewBox(x,y,width,height)のwidth/heightは投影画像の伸縮

• viewsBox(x, y, width, height)のwidth/heightは投影した画像のサイズとなります
  
• width/heightが元の設定より小さい場合に投影画像が小さくなります

投影された画像をSVG設定の領域の広さにに合わせて（伸縮）に表示させます

• 投影された画像がSVGに設定された領域を合わせて表示させます
• 上記の例(viewbox(20, 20, 20, 20))では、width/heightが元の設定（width="100" height="80"）より小さいので、それを合わせると、投影画像が実質的には拡大されました

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の方がより正確に中央に表示されます