SVG：通过 jQuery 更新在 FF 中有效，但在 Safari 中无效，有什么想法吗？答案

【问题标题】：SVG: Update through jQuery works in FF, but not in Safari, any ideas?SVG：通过 jQuery 更新在 FF 中有效，但在 Safari 中无效，有什么想法吗？
【发布时间】：2014-06-11 04:00:26
【问题描述】：

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

我的 HTML 中的 SVG：

  <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)

【问题讨论】：

标签： javascript jquery html safari svg

【解决方案1】：

我想我一开始我像这样向 textpath 节点添加了一个 id

 <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/

【讨论】：

我认为你是在正确的轨道上。使用 ID 和 .empty() 函数会触发重绘。我修改了你的例子jsfiddle.net/FmhqX/26。注意 alert() 如何打印“path”元素的属性“d”的内容。它会改变，但不会触发重绘。但是，如果您之后按下“更改文本”按钮，重绘将包含更改。有没有办法显式触发重绘？
为什么不起作用我真的不知道，因为我检查了 jquery 并且已经用新值修改了属性 d，所以我认为问题与路径元素有关我假设那是 html5 组件，不知道是什么行为
好吧，我接受了这个解决方法：jsfiddle.net/snies/FmhqX/30 我只需清空（）和追加（）当前文本来触发重绘。谢谢。

【解决方案2】：

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

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

#svg_cont 是 svg 元素的容器 div。

【讨论】：

【解决方案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。我不知道其他浏览器。）

【讨论】：

引用给定的链接：“我发现当我使用函数 document.createElementNS 而不是 document.createElement 元素添加到内联 SVG 时，使用例如 appendChild 函数一切正常。”