3

SVG テキスト要素に問題があります。SVG テキストの中心点を見つけたい。HTML ファイルの場合:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <text x="300" y="300" style="font-size: 80px;" id="test">It is example text</text>
 </svg>

Javascriptでは、次のようなものがあります：

var obj = document.getElementById('test').childNodes[1];
var box = obj.getBBox();

var centerPoint = new Object();
centerPoint.x = box.x + box.width / 2;
centerPoint.y = box.y + box.height/ 2;

しかし、うまくいきません。中心点が思ったよりも低くなっています。「centerPoint.y」から差し引かなければならないテキスト属性がもう 1 つあります。「centerPoint.x」の値は問題ないようです。IE9 ブラウザ、Chrome、Opera、Firefox で確認済みです。結果は同じです。

それとも、他の解決策がありますか？

編集

要約すると、私のコードは正しく動作します。コード全体を書き直しましたが、今は大丈夫です。何が起こったのかわかりません。おそらく私のブラウザはスクリプトをまったく更新していませんでした。line-height を「0」に設定する必要はありません。getBBox 必要なのはこれだけです。

とにかく、お時間をいただきありがとうございます。私の英語で申し訳ありません! :)

4

5 に答える 5

0

よりタイトな境界ボックスを探している場合は、テキスト要素内の文字を反復処理して、独自のよりタイトな境界ボックスを作成できます。getExtentOfChar DOM メソッドを参照してください。ただし、テキストが多い場合、これはコストがかかる可能性があることに注意してください。

于 2012-09-03T14:56:22.477 に答える
0

クロムでは、高さnaturalHeightとnaturalWidth幅が適切に取得されているようです。それらを試してみて、それらがあなたのために働くかどうか見てください?

var centrePoint = {
    x: obj.naturalWidth / 2,
    y: obj.naturalHeight / 2
}

要素の私の経験からSVG、はい、行の高さのように周囲に奇妙なパディングがある場合があるため、設定line-height:0が役立ちます。

また、によって返されるオブジェクトは、getBBox()実際にはピクセル単位ではありません。viewboxこれは、含まれている要素の に対して相対的SVGです。これは、必ずしもピクセルではありません。SVG私のサイトのviewboxは 500 x 500 ですが、サイズが 25px x 25px になるようにスタイル設定されています。したがって、ピクセルとはかなり異なる可能性があります。

于 2012-09-03T14:35:15.657 に答える
0

すべてのグリフが同じ高さではありません。「干し草」という言葉を考えてみましょう。h は a よりも高く、y は h と a の両方よりも下に下がっています (y にはディセンダーと呼ばれるものがあります)。SVG でテキストの境界ボックスを取得すると、グリフ セル サイズが得られます。これは通常、アセンダー (h) とディセンダー (y) の両方の文字に対応するのに十分です。これは、SVG 仕様でそれを行うように指示されている方法であり、これがすべてのブラウザが同じように動作する理由です。

于 2012-09-03T15:26:10.193 に答える
0

getBoundingClientRect()代わりに使用できますgetBBox()

var obj = document.getElementById('test').childNodes[1];
var box = obj.getBoundingClientRect();
var centerPointX = box.left + box.width / 2;
var centerPointY = box.top + box.height/ 2;
于 2017-06-09T06:37:08.270 に答える