SVG：通过jQuery更新在FF中工作，但在Safari中没有，任何想法？

我想更新一个嵌入式SVG。 我通过使用jQuery css选择器选择SVG元素，并通过jQuery的.attr（）函数改变它的属性。 它在FF中按预期工作，但在Safari中没有效果。 有任何想法吗？

我的HTML里面的SVG：

       Foo Bar     

JavaScript的：

 $("textPath").text("other text"); $("path").attr("d","M 60 70 L 90 30 L 300 60 L 180 120 L 60 70"); 

工作实例：

的jsfiddle

• 操作系统：Mac OS X 10.7.3
• Firefox：11.0
• Safari：5.1.5（7534.55.3）

Answer 1

我想我起初在这里添加了一个id到textpath节点

其次我改变了文本从文本添加的方式，因为你在节点内追加html内容并首先删除里面的内容看看

 $("#bt_text").click(function(){ $("#test").empty().append("other text allalaksddkfdsbbklas sldnsdd");}); $("#bt_coord").click(function(){ $("path").attr("d","M 60 70 L 90 30 L 300 60 L 180 120 L 60 70");});​ 

这是现场的例子

http://jsfiddle.net/FmhqX/23/

Answer 2

不优雅，但工作解决方案。 这会更新完整的svg：

 $("#svg_cont").html($("#svg_cont").html()); 

其中#svg_cont是svg元素的容器div。

Answer 3

此SVG刷新问题是一个难题。 经过大量研究后，我找到了最佳解决方案： http ： //jcubic.wordpress.com/2013/06/19/working-with-svg-in-jquery/

基本上，创造……

 $.fn.xml = function() { return (new XMLSerializer()).serializeToString(this[0]); }; $.fn.DOMRefresh = function() { return $($(this.xml()).replaceAll(this)); }; 

然后打电话给

 $("#diagram").DOMRefresh(); //where your  

这是一个奇迹，但它的确有效！ （Chrome和Firefox。我不知道其他浏览器。）