如何使用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 "));
                  });

我无法确切地说这是否有效，我所能看到的只是<rect></rect>中的DOM元素而没有attr 另一个注意事项是，当我使用chrome控制台将鼠标悬停在此元素上时，它会在x-0 , y=0上显示rec，

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

问题如何使用jquery

向SVG添加带属性的元素

编辑

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

ScreenShot

Answer 1

Highcharts还有一个绘图API，可用于绘制矩形。这也适用于VML。查看http://www.highcharts.com/ref/#renderer =＆gt;在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'

**编辑** 屏幕截图中的rect没有分配任何属性。没有宽度或高度，或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元素，因此您也可以在其中分配其他属性。 e.g：

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