17

<text>上部の余白を指定して、HTML5 SVG に要素を配置しようとしています。<text>たとえば、要素の上マージンを 10pxにしたいとします。これは機能しません:

<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 ピクセルのみが表示されるテキストを生成します。したがって、マージンを正しくするにfont-sizeは、値に値を追加する必要があります。y

<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でも可能ですか?

前もって感謝します！

4

2 に答える 2

27

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

フォントの高さを知りたい場合は、getExtentOfCharを呼び出して決定する必要があります。正確に要求したフォント サイズのフォントを取得すると仮定するのではありません。

于 2013-09-02T11:06:49.207 に答える
8

emの in属性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>

于 2015-03-09T01:07:19.137 に答える