0

1つまたは2つのパス要素を含むグループ要素を持つsvgマップ（jqueryを介してdomにレンダリング）があります。

各グループ要素の上にテキストを表示したいと思います。

jqueryを使用してそのグループ要素のオフセットを検索し、グループ要素のoffset.leftとoffset.topをx＆y座標として渡すことでテキスト要素を作成しました。

ただし、テキストはグループ要素の上に表示されません。代わりに、別の場所に表示されています。

SVG：

 <g class="clsTable" id="svg_20">
   <path d="m917.57495,396.125l-0.04999 ..." fill="#919100" clip-rule="evenodd" fill-rule="evenodd" id="svg_23"/>
   <path d="m916.32501,397.97501l0.09998,2.85001l13.90002,0l0 ..." fill="#FFFF00" clip-rule="evenodd" fill-rule="evenodd" id="svg_26"/>
  </g>

Jquery：

var x = $("#svg_20").offset().left;
var y = $("#svg_20").offset().top;        
var _text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
_text.setAttribute('x', x);
_text.setAttribute('y', y);
_text.setAttribute('visibility', 'visible');
_text.setAttribute('id', 'lbl');
_text.setAttribute('objectid', "#svg_20");
textNode = document.createTextNode("HI");
_text.appendChild(textNode);
$('svg').append(_text);

出力：

ここに画像の説明を入力してください

gにはgetBoundingClientRect（）を、子パス要素にはgetBBox（）を試しました。しかし、私はオブジェクトがJavascriptでこのプロパティエラーをサポートしていないことを取得しています。私は何か間違ったことをしていますか？...

$("#svg_26").getBBox();

私のアプリケーションはasp.netにあり、ターゲットブラウザはchromeとsafariです。私はcanvas要素を使用していません。代わりに、メインdivのinnerHtml内でsvgをdomに直接レンダリングしています。

jqueryで正しい座標を見つけて、そのグループ要素の画像の上にラベルを配置するにはどうすればよいですか？

どんな助けでもありがたいです。ありがとう。

4

1 に答える 1

1

jQuery オブジェクトで DOM メソッドを呼び出そうとしています。したがって、「オブジェクトはこのプロパティをサポートしていません」というエラーが表示されます。これらのメソッドは、DOM 要素で直接呼び出す必要があります。

例：

$("#svg_26")[0].getBBox();
// or
$("#svg_26").get(0).getBBox();

参照: jQuery オブジェクトからネイティブ DOM 要素を取得するにはどうすればよいですか?

于 2013-02-05T08:40:10.080 に答える