How can i add element with attributes to SVG using jquery

Question

i'm using Highcharts , the chart result is a collection of SVG elements and i was trying to add some elements to this SVG using jquery

Here is what i have tried

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 "));
                  });

i can't really say if this is working or not , all i can see is a <rect></rect> element in my DOM with no attr another notice is when i hover on this element using chrome console it shows the rec on x-0 , y=0 ,

i have an idea that jquery does not append svg elements hop i'm wrong

Question How can i add element with attributes to SVG using jquery

EDIT

with help now i have id for the rect element then i tried to add attr with using the id , but failed

ScreenShot

Answer 1

Highcharts also has a drawing API that you can use to draw rectangles. This works also for VML. Check out http://www.highcharts.com/ref/#renderer => rect and live sample at http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/members/renderer-rect-on-chart/ .

Answer 2

如您在这里看到的，没有属性rx和ry ，尝试将其更改为x和y 。

Answer 3

Rectangles have x and y attributes. rx and ry are used on circles.

Also, are you sure your selector is correct? You might want to lowercase the 'Svg'

** edit ** The rect in your screenshot doesn't have any of the attributes assigned. There's no width or height, or x/y positions. You should try giving the rectangle an id when appending it, and querying for it using that same id.

See: https://developer.mozilla.org/en/DOM/document.createElementNS

You can do it like this:

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

Then append the rect through the normal route.

Note that, since you have the raw dom element, you might be able to assign your other properties there as well. eg:

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