2

我创建了一些基于 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>
4

1 回答 1

1

我创建了一些代码来解析路径的“d”属性并用新值替换这个属性，见下文。动画似乎是不可能的，因为只有某些属性可以用 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>
于 2013-02-22T18:04:48.830 回答