在 JavaScript 中为 SVG 线设置动画答案

【问题标题】：Animating a SVG Line in JavaScript在 JavaScript 中为 SVG 线设置动画
【发布时间】：2017-03-27 12:14:07
【问题描述】：

你好

我正在使用此代码创建 SVG 线条并为其设置动画，第一个不起作用，但其余的都起作用，我缺少什么？

var newElement = document.createElementNS('http://www.w3.org/2000/svg','line');
            newElement.setAttribute('class','travelPath');
            newElement.setAttribute('x1',currentCity.x);
            newElement.setAttribute('y1',currentCity.y);
            newElement.setAttribute('x2',nextCity.x+10);
            newElement.setAttribute('y2',nextCity.y+10);
            newElement.style.stroke="#3541b1";
            $("#theSVG").append(newElement);

            var length = newElement.getTotalLength();

            $(newElement).css({
                'stroke-dasharray': length+1,
                'stroke-dashoffset': length+1
            });

            $(newElement).animate({'stroke-dashoffset': 0}, 3000, mina.bounce);

length 变量在第一个 console.log 中返回为 0，但是当我稍后再次运行它时，它会返回正确的值并进行动画处理。

几乎就好像这条线在它尝试动画之前没有被绘制一样。

【问题讨论】：

既然只是一条简单的线，为什么不自己计算长度呢？
好吧，因为此方法绘制了可能由用户选择的 2.000 条不同的线之一。你会如何看待这个 Sirko？
length = Math.sqrt( Math.pow( newCity.x + 10 - currentCity.x, 2 ) + Math.pow( newCity.y + 10 - currentCity.y, 2 ) )。希望我没有忘记任何括号。
谢谢你，伙计，工作。仍然不清楚为什么它首先失败了，哈哈。

标签： javascript jquery snap.svg

【解决方案1】：

getTotalLength 并不能很好地支持我对“line”元素的理解。

您可以将其转换为路径。比如……

var newElement = document.createElementNS('http://www.w3.org/2000/svg','path');
newElement.setAttribute('class','travelPath');
newElement.setAttribute('d', "M50,50L100,100")
newElement.style.stroke="#3541b1";

$("#theSVG").append(newElement);

var length = newElement.getTotalLength();
console.log( length )

jsfiddle

看看这是否有帮助。

【讨论】：

感谢您的回复，我让它与 line 元素一起使用，我忘了说的是我只为一个屏幕创建这个，一个本地屏幕。

【解决方案2】：

由于您在欧几里得平面中只有一条直线，因此您可以直接使用以下方法计算长度：

let length = Math.sqrt( 
              Math.pow( newCity.x + 10 - currentCity.x, 2 ) + 
              Math.pow( newCity.y + 10 - currentCity.y, 2 ) 
             );

【讨论】：