Question

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.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");

Working Example:

JsFiddle

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

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