Question

我基于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>

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

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

1 个答案: