HTML5 SVG - テキストの配置

Question

HTML5 SVGに<text>要素を配置する際に、余白を付けます。たとえば、<text>要素の上端を10ピクセルにしたいとしましょう。これは動作しません。

<svg style="height: 100px; border: 1px solid black"> 
    <text fill="#000" x="10" y="10" font-size="50" font-family="Arial"> 
     <tspan>The quick brown fox jumps over the lazy dog</tspan> 
    </text>  
</svg> 

問題は、SVGのテキスト要素のために、y距離は、テキストではなく、トップの一番下の行から測定されていること、です。このコードは、下位10ピクセルのみが表示されるテキストを生成します。そこで、我々は余裕の権利を取得するためにy値にfont-size値を追加する必要があります。

<svg style="height: 100px; border: 1px solid black"> 
    <text fill="#000" x="10" y="60" font-size="50" font-family="Arial"> 
     <tspan>The quick brown fox jumps over the lazy dog</tspan> 
    </text>  
</svg> 

は、少なくとも、それは私が考えたものでした。しかし、これはどちらもうまくいかない。今、あなたはフィドルで見ることができるように、上部マージンが大きすぎます： http://jsfiddle.net/yy8gS/2/。私は上のマージンが左のマージンと同じであることを望んでいます、それは明らかにそうではありません。実際には、 yの値は48ですが、私はその理由や考え方がわかりません。また、この値を任意の余白やフォントサイズで計算する方法もありません。 font-sizeの値は、SVGが位置決めに使用する実際のテキストの高さの値ではないようです。

誰でも私にこれを手伝ってもらえますか？私はSVGでも可能なことをしようとしていますか？

ありがとうございます！

Answer 1

設定dominant-baselineは、テキスト位置がベースラインではなくテキストの上端に基づいているように、おそらくdominant-baseline="hanging"が必要です。

フォントの高さを知りたければ、尋ねたとおりのフォントサイズのフォントを取得するのではなく、getExtentOfCharと呼んでください。

Answer 2

emをyとdyにも使用できます - 属性！

これは、少なくとも私の問題を解決しました：支配的なベースラインを変更する

<div> 
 
    <p>working: margin as y-value:</p> 
 
    <svg style="height: 100px; border: 1px solid black"> 
 
    <text fill="#000" x="10" y="1em" font-size="50" font-family="Arial"> 
 
     <tspan>The quick brown fox jumps over the lazy dog</tspan> 
 
    </text>  
 
    </svg> 
 
</div>