2

パスに沿ってテキストを表示するjQuerySVGプラグインに基づいてサンプルコードを作成しました。ここで、テキストをクリックすると、パスを変更したいと思います（たとえば、[[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