奇妙なレイアウト上のSVGテキスト

Question

私はSVG <rect>にSVGテキスト（もちろん<text>で囲まれています）を作成しようとしています。

そして、私はそれを私のrectの中心にあるテキストのように見せたいと思います。

しかし、私がそこに着いた奇妙なことは、私が仮定したように見えません。

私はそれはそれで間違っていること

いただきましたように見えることがつもり想定した場合それはこの

のように見えますか？

まず、私は動作します等しいxとy<text>中と<rect>ことを取り払わ、それは

私はテキストを強制的にテキストでy="50%"は途中でどこかにancorすることを取り払わ下の写真のようなものでした。しかし、私はあなたが見ることができるようにy="80%"でのみ達成することができます。

オリジナルのマークアップは、ここで

<svg height="500" width="500" class="ng-scope"> 
 

 
    <svg height="50" width="393.703125" y="0"> 
 

 
    <g> 
 
     <rect x="0" y="0" height="50" width="393.703125" style="fill: #A8A8A8"> 
 
     </rect> 
 
     <text font-family="Airal" font-size="45" x="0" y="50%" inline-size="200"> 
 
     TEST TEXT IN SVG 
 
     </text> 
 
    </g> 
 
    </svg> 
 

 
</svg>

Answer 1

あるデフォルトあたりでテキストボトムラインに印加y性 - そうテキストのy位置との間に差があります線、矩形、または他の形状のy位置。

alignment-baselineのプロパティを使用できます。より良い結果を得るためにはmiddleである。 Here's the w3c descriptionにはさらに多くのオプションがあります。

<svg height="500" width="500" class="ng-scope"> 
 

 
    <svg height="50" width="393.703125" y="0"> 
 

 
    <g> 
 
     <rect x="0" y="0" height="50" width="393.703125" style="fill: #A8A8A8"> 
 
     </rect> 
 
     <text font-family="Airal" font-size="45" x="0" y="50%" inline-size="200" alignment-baseline="middle"> 
 
     TEST TEXT IN SVG 
 
     </text> 
 
    </g> 
 
    </svg> 
 

 
</svg>

Answer 2

ビューボックスを追加します。繰り返しますが、私はsvgで専門家ではなく、ちょうどいくつかの仕事をしましたが、これはうまくいくかもしれません。

<svg height="500" width="500" class="ng-scope"> 
 

 
    <svg height="50" width="393.703125" y="0" viewBox="0 0 90 90"> 
 

 
    <g> 
 
     <rect x="0" y="0" height="50" width="393.703125" style="fill: #A8A8A8" > 
 
     </rect> 
 
     <text font-family="Airal" font-size="45" x="0" y="50%" inline-size="200"> 
 
     TEST TEXT IN SVG 
 
     </text> 
 
    </g> 
 
    </svg> 
 

 
</svg>