Javascript SVG：通过jQuery更新可以在FF中工作，但不能在Safari中工作，有什么想法吗？

我想更新一个嵌入式SVG。我使用jQuery css选择器选择SVG元素，并通过jQuery的.attr函数更改其属性。它在FF中可以正常工作，但在Safari中没有效果。有什么想法吗

我的HTML中的SVG：

工作示例：

操作系统：Mac OS X 10.7.3 Firefox:11.0 狩猎：5.1.5 7534.55.3

---

我想我一开始在textpath节点上添加了一个id，如下所示

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

这是一个活生生的例子

---

不是优雅的，而是有效的解决方案。这将更新完整的svg：

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

---

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

此svg刷新问题是一个难题。经过大量研究，我在这里找到了最佳解决方案：

基本上，创建

$.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。我不知道其他浏览器的情况。

我认为你的思路是对的。使用ID和.empty函数会触发重画。我对你的例子做了一些修改。请注意，警报是如何打印path元素的属性d的内容的。它会更改，但不会触发重画。但是，如果您随后按下“更改文本”按钮，则重画将合并更改。有没有办法显式触发重画？为什么不起作用我真的不知道，因为我检查了jquery并已经用新值修改了属性d，因此，我认为问题在于路径元素，我假设它是html5组件，不知道行为是什么。我解决了这个问题：我将清空并附加当前文本以触发重画。谢谢。引用下面的链接：我发现当我使用函数document.createElements而不是document.createElement元素（使用例如appendChild函数添加到内联SVG）时，一切正常。

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

$.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"