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

Question

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

我可以从 jquery .append 附加相同的内容，但我无法在浏览器中看到任何内容，尽管标签被动态附加到我们的 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;

    });

}

我找到了以下代码，以便刷新页面并显示 svg 元素:- $("body").html($("body").html());

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

有什么办法可以解决这个问题

Answer 1

看来您的问题在于 html 与 svg 命名空间。以下答案很好地总结了您的问题:jquery's append not working with svg element?

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

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