2

SVG グラフに 2 つのテキスト ラベルがあります。

<svg width="960" height="500"><g transform="translate(20,20)">
    <text class="title" dx="0px" dy="39px">1980-2012</text>
    <text class="cantontitle" dx="0px" dy="78px">Graubünden</text>
</svg>​

次の CSS スタイルを使用します。

svg {                                                                                       
    font: 10px sans-serif;                                                                  
}                                                                                           

.title {                                                                                    
    font: 300 78px Helvetica Neue;                                                          
    fill: #666;                                                                             
}                                                                                           

.cantontitle {                                                                              
    font: 300 40px Helvetica Neue;                                                                                                     
    fill: #666;                                                                             
}                                                                                          ​

残念ながら、文字は正しく左揃えではありません。

スクリーンショット

<text>2 つの要素の最初の文字を適切に左揃えにすることは可能ですか?

テストを簡単にするための jsfiddle を次に示します: http://jsfiddle.net/UMnnP/1/

4

1 に答える 1

1

テキストは左揃えです。オフセットは、フォント内のグリフのメトリックによって発生します。単純なパスとは異なり、グリフには追加のメトリクス定義があり、それが「生きている」長方形を定義します。この長方形の左端は、グリフのグラフィックスの左端から独立しており、負および正のオフセットを持つことができます。フォント メトリックに加えて、特別なグリフのペアにカーニングが追加されます。

グリフを完全に正確に左に揃えるには、テキストをパスに変換する必要があります。または、グリフのメトリックをチェックしてオフセットを取得することもできます。これは、フォントが svg 形式の場合に簡単に可能です。しかし、全体として、これは非常に面倒で、修正するために少し手書きのオフセットになる可能性があり、何時間ものコーディングを節約できますが、本当に必要な場合は、フォントとそのメトリックに連絡することを強くお勧めします.

ご挨拶…</p>

編集：

あなたのCSSは機能しません！見るのが遅すぎた…</p>

それは違いない：

font-family : Helvetica Neue

それ以外の

font : Helvetica Neue

これにより、かなり左揃えになります…</p>

于 2012-11-20T13:38:43.700 に答える