title: Change (or animate) path using jQuery SVG
body: <p>I created some sample code based on the jQuery SVG plugin that shows a text along a path. Now when I click the text, I would like to change the path (e.g. from [[50,50],[100,100]] to [[50,50],[200,300]]). I'd also like to know how to apply this change using an animation.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.svg.min.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.svgdom.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        jQuery(function($){
              $('#debugsvg').svg({onLoad: function(svg) {
                  var path = svg.createPath();
                  var text = svg.text("");
                  var defs = svg.defs(); 
                  svg.path(defs, path.move(50, 50).line(100, 100),  {id: "myPath"}); 
                  svg.textpath(text, '#myPath', "foo bar");
                  $(text).click(function(e) {
                      alert("Animate me please!");
                  });
              }});
        });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="debugsvg" style='height="600px", width="600px"'&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>