如何使用 jquery 将具有属性的元素添加到 SVG

Question

我正在使用 Highcharts，图表结果是 SVG 元素的集合，我试图使用 jquery 向 SVG 添加一些元素

这是我尝试过的

function(chart) { // on chart load complete 
  $("#highcharts-0 Svg").
   append(document.createElementNS("http://www.w3.org/2000/svg", "rect"));
   $("#highcharts-0 Svg").find("rect").
   attr({x : 100 , y:100 , width : 100 , height : 100 });
   console.log($("#highcharts-0 Svg "));
                  });

我真的不能说这是否有效，我能看到的只是我的DOM 中的一个<rect></rect> 元素，没有attr 另一个通知是，当我使用 chrome 控制台将鼠标悬停在此元素上时，它会在 x-0 , y=0 上显示记录，

我知道 jquery 不会附加 svg 元素 hop 我错了

问题如何使用 jquery 向 SVG 添加具有属性的元素

编辑

现在有了id 的帮助，rect 元素 然后我尝试使用id 添加attr，但失败了

ScreenShot

Answer 1

Highcharts 还有一个绘图 API，可用于绘制矩形。这也适用于 VML。查看http://www.highcharts.com/ref/#renderer => rect 和http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/members/renderer-rect-on-chart/ 的实时样本。

Answer 2

如您所见here，没有rx和ry的属性，请尝试将其更改为x和y。

Answer 3

矩形具有 x 和 y 属性。 rx 和 ry 用于圆圈。

另外，你确定你的选择器是正确的吗？您可能希望将“Svg”小写

** 编辑 ** 屏幕截图中的矩形没有分配任何属性。没有宽度或高度，或 x/y 位置。您应该尝试在附加矩形时给它一个 id，并使用相同的 id 查询它。

见： https://developer.mozilla.org/en/DOM/document.createElementNS

你可以这样做：

var rect = document.createElementNS("http://www.w3.org/2000/svg","rect");
rect.id = 'your_id_here';

然后通过正常路径附加矩形。

请注意，由于您拥有原始 dom 元素，因此您也可以在那里分配其他属性。例如：

rect.x = 100;
rect.y = 100;
rect.fill = 'blue';