0

テキストの幅と高さ、および四角形の幅と高さに基づいて、テキストを四角形の中央に配置したいと考えています。以下の SVG コードを参照してください。

<g transform="translate(73,535)" id="container_svg_ToolTip">
<rect id="container_svg_SvgRect" x="314.58333333333337" y="-85.60000000000001" width="16" height="16" fill="white" stroke-width="1" stroke="Black"/>
<text id="container_svg_ToolTipText_4" x="314.58333333333337" y="-85.60000000000001" fill="black" font-size="12px" font-family="Times New Roman" font-style="Normal " text-anchor="start" clip-path="url(#container_svg_ChartAreaClip)" dominant-baseline="middle">40
</text></g>

最大テキスト サイズ (幅と高さ) に基づいて四角形の幅と高さを設定し、テキストを四角形の中央に配置したいと考えています。これを行うには計算が必要です。下のリンクのようなrectX+10、rectY+10のようなパディング値を追加する必要はありません。

SVG: rect 内のテキスト

以下のスクリーンショットを参照してください。

ここに画像の説明を入力

ありがとう、

シヴァ

4

1 に答える 1

0

これはうまくいくはずです：

        var text = $("#my_svg #container_svg_ToolTipText_4");
        var width = text.innerWidth();
        var rect = $("#my_svg #container_svg_SvgRect");
        rect.attr("width", width + 10);

四角形の x 値をテキストの x 単位よりも 5 単位小さく設定すると、中央に配置されます。四角形の y 値をテキストの y 単位より ~10 単位小さく設定するか、 を使用してテキストの高さを計算しますinnerHeight。

于 2013-05-01T13:14:43.033 に答える