[英]How can i add element with attributes to SVG using jquery
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 我正在使用Highcharts ,图表结果是SVG元素的集合,我试图使用jquery向该
SVG
添加一些元素
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
, 我真的不能说这是否正常工作,我只能看到
DOM
的<rect></rect>
元素,而没有attr
另一个提示是,当我使用chrome控制台将鼠标悬停在此元素上时,它会显示rec x-0 , y=0
,
i have an idea that jquery does not append svg elements hop i'm wrong 我有一个想法,jQuery的不追加SVG元素跳我错了
Question How can i add element with attributes to SVG using jquery 问题如何使用jquery将具有属性的元素添加到SVG
EDIT 编辑
with help now i have id
for the rect
element then i tried to add attr
with using the id
, but failed 与帮助下现在我有
id
为rect
元素,然后我试图添加attr
使用的id
,但是失败
Highcharts also has a drawing API that you can use to draw rectangles. Highcharts还具有可用于绘制矩形的图形API。 This works also for VML.
这也适用于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/ .
在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 / 。
如您在这里看到的,没有属性rx
和ry
,尝试将其更改为x
和y
。
Rectangles have x and y attributes. 矩形具有x和y属性。 rx and ry are used on circles.
rx和ry用于圆圈。
Also, are you sure your selector is correct? 另外,您确定选择器正确吗? You might want to lowercase the 'Svg'
您可能要小写“ 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.
没有宽度或高度或x / y位置。 You should try giving the rectangle an id when appending it, and querying for it using that same id.
您应该尝试在附加矩形时给它一个ID,并使用相同的ID进行查询。
See: https://developer.mozilla.org/en/DOM/document.createElementNS 请参阅: 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. 请注意,由于具有原始dom元素,因此您也可以在那里指定其他属性。 eg:
例如:
rect.x = 100;
rect.y = 100;
rect.fill = 'blue';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.