在JavaScript中设置SVG行的动画

你好

我正在使用这段代码创建SVG行，然后设置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，但当我稍后再次运行它时，它返回正确的值，并在中设置动画

---

就好像这条线在尝试设置动画之前还没有画出来一样。

对于我对“线”元素的理解，getTotalLength并没有得到很好的支持

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

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 )

---

看看这是否有帮助。

我对“line”元素的理解并没有很好地支持getTotalLength

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

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 )

---

看看这是否有帮助。

因为在欧几里德平面上只有一条直线，所以可以直接使用以下公式计算长度：

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

---

由于欧几里德平面上只有一条直线，因此可以直接使用以下公式计算长度：

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

---

因为这只是一条简单的线，为什么不自己计算长度呢？因为这个方法可能会绘制出2000条不同的线中的一条，由用户选择。你将如何处理这个Sirko？

length=Math.sqrt（Math.pow（newCity.x+10-currentCity.x，2）+Math.pow（newCity.y+10-currentCity.y，2））

。希望我没有忘记任何括号。谢谢你，伙计，工作。还不清楚它为什么会失败。因为它只是一条简单的线，为什么你不自己计算长度呢？因为这种方法可能会画出2000条不同的线中的一条，由用户选择。你将如何处理这个Sirko？

length=Math.sqrt（Math.pow（newCity.x+10-currentCity.x，2）+Math.pow（newCity.y+10-currentCity.y，2））

。希望我没有忘记任何括号。谢谢你，伙计，工作。还不清楚为什么它一开始就失败了哈。谢谢你的回复，我让它与line元素一起工作，我忘了说的是我只为一个屏幕创建了这个，一个本地屏幕。谢谢你的回复，我让它与line元素一起工作，我忘了说我只为一个屏幕创建了这个，本地的。