使用 jQuery SVG 更改（或动画）路径答案

【问题标题】：Change (or animate) path using jQuery SVG使用 jQuery SVG 更改（或动画）路径
【发布时间】：2013-01-31 19:29:08
【问题描述】：

我创建了一些基于 jQuery SVG 插件的示例代码，它沿路径显示文本。现在，当我单击文本时，我想更改路径（例如从 [[50,50],[100,100]] 到 [[50,50],[200,300]]）。我还想知道如何使用动画应用此更改。

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script src="jquery.svg.min.js"></script>
    <script src="jquery.svgdom.min.js"></script>
    <script>
      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!");
                });
            }});
      });
    </script>
  </head>
  <body>
    <div id="debugsvg" style='height="600px", width="600px"'>
    </div>
  </body>
</html>

【问题讨论】：

标签： javascript svg jquery-svg

【解决方案1】：

我创建了一些代码来解析路径的“d”属性并将该属性替换为新值，见下文。动画似乎是不可能的，因为只有 certain attributes 可以使用 JQuery SVG 进行动画处理。

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script src="jquery.svg.min.js"></script>
    <script src="jquery.svgdom.min.js"></script>
    <script src="jquery.svganim.min.js"></script>
    <script>
      jQuery(function($){
            $('#debugsvg').svg({onLoad: function(svg) {
                var path = svg.createPath();
                var text = svg.text("");
                var defs = svg.defs(); 
                var path = svg.path(defs, path.move(50, 50).line(100, 100),  {id: "myPath"}); 
                svg.textpath(text, '#myPath', "foo bar");
                $(text).click(function(e) {
                    var d = $(path).attr('d');
                    var re = new RegExp("([^,]+),([^L]+)L([^,]+),([^,]+)", "");
                    var m = d.match(re);
                    var dNew = m[1] + "," + (m[2] - 20) + "L" + m[3] + "," + (m[4] - 40);
                    $(path).attr({d: dNew});
                });
            }});
      });
    </script>
  </head>
  <body>
    <div id="debugsvg" style='height="600px", width="600px"'>
    </div>
  </body>
</html>

【讨论】：