javascript - SVG: Update through jQuery works in FF, but not in Safari, any ideas? - Stack Overflow

admin管理员组

文章数量:1391975

I want to update an embedded SVG. I select the SVG element by using a jQuery css selector and alter it's attribute through jQuery's .attr() function. It works as expected in FF but shows no effect in Safari. Any Ideas?

SVG inside my HTML:

  <svg id="svgelem" height="150" width="400" xmlns="">
   <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");

Working Example:

JsFiddle

• OS: Mac OS X 10.7.3
• Firefox: 11.0
• Safari: 5.1.5 (7534.55.3)

I want to update an embedded SVG. I select the SVG element by using a jQuery css selector and alter it's attribute through jQuery's .attr() function. It works as expected in FF but shows no effect in Safari. Any Ideas?

SVG inside my HTML:

  <svg id="svgelem" height="150" width="400" xmlns="http://www.w3/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");

Working Example:

JsFiddle

• OS: Mac OS X 10.7.3
• Firefox: 11.0
• Safari: 5.1.5 (7534.55.3)

• javascript
• jquery
• html
• safari
• svg

Share Improve this question Follow edited Apr 26, 2012 at 12:50 snies asked Apr 26, 2012 at 12:11 sniessnies 3,52111 gold badge2424 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I think that I got at first i added a id to textpath node like this

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

Second i change the way property from text to append because your append html content inside the node and removing first the content inside take a look

$("#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");});​

Here's the live example

http://jsfiddle/FmhqX/23/

Not elegant,but working solution. This updates the full svg:

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

where #svg_cont is a container div of svg element.

This SVG refresh issue is a difficult issue. After much research I found the best solution here: http://jcubic.wordpress./2013/06/19/working-with-svg-in-jquery/

Basically, create...

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

$.fn.DOMRefresh = function() {
    return $($(this.xml()).replaceAll(this));
};

then call it with

$("#diagram").DOMRefresh(); //where your <svg> tag has id="diagram"

It is a miracle, but it works! (Chrome and Firefox. I don't know about those other browsers.)

本文标签：