我如何使用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控制台将鼠标悬停在此元素上时，它会显示rec x-0 , y=0 ，

我有一个想法，jQuery的不追加SVG元素跳我错了

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

编辑

与帮助下现在我有id为rect元素，然后我试图添加attr使用的id ，但是失败

屏幕截图

Answer 1

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

Answer 2

如您在这里看到的，没有属性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';