Question

你好

我正在创建并使用此代码制作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);

长度变量在第一个console.log上返回0，但是当我稍后再次运行它时，它返回正确的值，并以动画形式显示。

在试图制作动画之前几乎没有画过这条线。

Answer 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

看看这是否有帮助。

Answer 2

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

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

使用JavaScript动画SVG行

2 个答案: