2

我想更新嵌入式 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");

工作示例：

提琴手

  • 操作系统：Mac OS X 10.7.3
  • 火狐：11.0
  • 野生动物园：5.1.5 (7534.55.3)
4

3 回答 3

3

我想我一开始我像这样向 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/

于 2012-04-26T13:42:38.873 回答
3

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

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

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

于 2013-01-22T10:58:28.050 回答
1

这个 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。我不知道其他浏览器。）

于 2014-06-10T20:00:26.720 回答