如何在我们的html页面中附加jquery的svg标签？

I want to append some svg tags and then inside svg tag I want to append circles and lines whose coordinates I am fetching from XML file.

我想附加一些svg标签然后在svg标签内我想要追加我从XML文件中获取坐标的圆和线。

I can append the same from jquery .append but I am not able to see anything in the browser although the tags are being appended in our DOM dynamically, but not able to see in the browser.

我可以从jquery .append追加相同但我无法在浏览器中看到任何内容,尽管标签是动态地附加在我们的DOM中,但是无法在浏览器中看到。

This is my code for fetching data from XML and the appending to the DOM:-

这是我从XML获取数据和附加到DOM的代码: -

$(xml).find("Quadron").children().each(function(i){
    var valueParameter=$(this).attr("value");
    var riskParameter=$(this).attr("risk");

    $('<circle/>',{
        clicked:'plot'+i,
        technology:$(this).parent().parent().attr("YearName"),
        quadronName:$(this).parent().attr("title"),
        class:'plot',
        cx:dotsXposition,
        cy:dotsYposition,
        r:function(){
            if(valueParameter=="high"){return 10;}
            else if(valueParameter=="medium"){return 5;}
            else if(valueParameter=="low"){return 2;}
            },
        fill:function(){
            if(riskParameter=="high"){return "#b42a2d";}
            else if(riskParameter=="medium"){return "#ebd62e";}
            else if(riskParameter=="low"){return "#72aa2c";}
            }
    }).appendTo('#circlePlot');

    $('<text/>',{
        clicked:'plot'+i,
        technology:$(this).parent().parent().attr("YearName"),
        class:'plot',
        text:$(this).text(),
        x:dotsXposition+15,
        y:dotsYposition
    }).appendTo('#circlePlot');

    dotsXposition+=10;
    dotsYposition+=10;

    });

}

I found the following code so that to refresh the page and to display the svg elemnts:- $("body").html($("body").html());

我找到了以下代码,以便刷新页面并显示svg elemnts: - $(“body”)。html($(“body”)。html());

But after including this code in my java script file click events doesn't work.

但是在我的java脚本文件中包含此代码后,单击事件不起作用。

Is there any way to solve this.

有没有办法解决这个问题。

2 个解决方案

#1

It looks like your issue is with the html vs svg namespace. The following answer does a good job of summing up your issue: jquery's append not working with svg element?

看起来你的问题是html vs svg命名空间。以下答案很好地总结了你的问题:jquery的追加不使用svg元素?

My suggestion would be to use a js library to handle creating the elements. Snap svg is a great solution and should handle the issues you are having.

我的建议是使用js库来处理创建元素。 Snap svg是一个很好的解决方案,应该可以解决您遇到的问题。

Also, doing $('body').html($('body').html()); is a really bad idea. Essentially, you are erasing all the DOM elements (with the all the events bound to them) and rebuilding the entire page with brand new elements. That's why all your events are getting destroyed.

另外,做$('body')。html($('body')。html());是一个非常糟糕的主意。从本质上讲,您正在删除所有DOM元素(所有事件都绑定到它们)并使用全新元素重建整个页面。这就是为什么你的所有活动都被摧毁了。

#2

Got the answer of my question. I have used D3.js to dynamically append the SVG elements into my DOM, and it is working fine now.

得到了我的问题的答案。我已经使用D3.js动态地将SVG元素附加到我的DOM中,现在它正常工作。

I have used the following code:

我使用了以下代码:

d3.select("#circlePlot").append("circle")
            .attr("clicked","plot"+i)
            .attr("technology",$(this).parent().parent().attr("YearName"))
            .attr("quadronName",$(this).parent().attr("title"))
            .attr("class","plot")
            .attr("cx",500+(r*Math.cos(angle)))
            .attr("cy",350-(r*Math.sin(angle)))
            .attr("r",function(){
                if(valueParameter=="high"){return 10;}
                else if(valueParameter=="medium"){return 6;}
                else if(valueParameter=="low"){return 3;}
                })
            .attr("fill",function(){
                if(riskParameter=="high"){return "#b42a2d";}
                else if(riskParameter=="medium"){return "#ebd62e";}
                else if(riskParameter=="low"){return "#72aa2c";}
                });

        d3.select("#circlePlot").append("text")
            .attr("clicked","plot"+i)
            .attr("technology",$(this).parent().parent().attr("YearName"))
            .attr("class","plot")
            .text($(this).text())
            .attr("x",500+(r*Math.cos(angle))+10)
            .attr("y",350-(r*Math.sin(angle)));

#1