0

我有一个 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>

查询：

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。我没有使用画布元素。相反，我直接在主 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 回答