在svg中的组元素顶部渲染文本元素

Question

我有一个svg地图（通过jquery渲染到dom），其中包含一个或两个路径元素的组元素。

我想在每个组元素的顶部显示一些文本。

我使用jquery来查找该组元素的偏移量，并通过传递offset.left＆amp;来创建文本元素。 group元素的offset.top为x＆amp; 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和get路径元素的getBBox（）尝试了getBoundingClientRect（）。但我得到的对象不支持Javascript中的此属性错误。我做错了吗？...

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

我的应用程序在asp.net中，目标浏览器是chrome和safari。我没有使用canvas元素。相反，我将svg直接渲染到主div的innerHtml内的dom。

如何在jquery中找到正确的坐标并将标签放在顶部 该组元素图像？

任何帮助将不胜感激。感谢。

Answer 1

您正在尝试在jQuery对象上调用DOM方法。因此错误“对象不支持此属性”。您需要直接在DOM元素上调用这些方法。

示例：

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

请参阅：How do I pull a native DOM element from a jQuery object?