Svg: Update Through Jquery Works In Ff, But Not In Safari, Any Ideas?

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

Solution 1:

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.net/FmhqX/23/

Solution 2:

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

Basically, create...

$.fn.xml = function() {
    return (newXMLSerializer()).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.)