SVG：更新通过jQuery的工作在FF，但不是在Safari浏览器，任何想法？(SVG: Upda

我想更新嵌入SVG。 我通过使用一个jQuery CSS选择选择SVG元素和改变它通过jQuery的.attr（）函数属性。 它的工作原理如预期FF但显示在Safari没有影响。 有任何想法吗？

SVG我的HTML中：

  <svg id="svgelem" height="150" width="400" xmlns="http://www.w3.org/2000/svg">
   <defs>
    <path id = "s3" d = "M 60 70 L 220 30 L 300 60 L 180 120 L 60 70" fill = "green" stroke = "black" stroke-width = "3"/>
   </defs>
   <g fill = "navy">
    <text font-size = "20">
     <textPath xlink:href = "#s3">
       Foo Bar
     </textPath>
    </text>
   </g>
  </svg>

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
• 火狐：11.0
• Safari浏览器：5.1.5（7534.55.3）

Answer 1:

我想，我起初，我增加了一个ID像这样textpath节点

 <textPath id="test" xlink:href = "#s3">

其次，我的方式财产的文字更改为追加，因为节点内的附加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 <svg> tag has id="diagram"

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

文章来源: SVG: Update through jQuery works in FF, but not in Safari, any ideas?