Javascript 使用jQuery SVG更改（或设置）路径_Javascript_Svg_Jquery Svg

Javascript 使用jQuery SVG更改（或设置）路径

javascript svg

Javascript 使用jQuery SVG更改（或设置）路径,javascript,svg,jquery-svg,Javascript,Svg,Jquery Svg,我基于jQuerySVG插件创建了一些示例代码，该插件沿路径显示文本。现在，当我单击文本时，我想更改路径（例如从[[50,50]，[100100]]到[[50,50]，[200300]]）。我还想知道如何使用动画应用此更改 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> &l

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

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


jQuery（函数（$）{
$（'#debugsvg'）.svg（{onLoad:function（svg）{
var path=svg.createPath（）；
var text=svg.text（“”）；
var defs=svg.defs（）；
path（defs，path.move（50，50）.line（100100），{id:“myPath”}）；
textpath（text，#myPath'，foobar）；
$（文本）。单击（函数（e）{
警惕（“请给我动画！”）；
});
}});
});

我创建了一些代码来解析路径的“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>


jQuery（函数（$）{
$（'#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（100100），{id:“myPath”}）；
textpath（text，#myPath'，foobar）；
$（文本）。单击（函数（e）{
var d=$（path.attr（'d'）；
var re=new RegExp（（[^，]+），（[^L]+）L（[^，]+），（[^，]+），”；
var m=d.匹配（re）；
var dNew=m[1]+“，”+（m[2]-20）+“L”+m[3]+“，”+（m[4]-40）；
$（path.attr（{d:dNew}）；
});
}});
});