javascript - 点出现在带有圆形线帽 FF,IE 的线之前

Question

我正在尝试使用 SVG 制作简单的线条绘制动画。我正在使用 javascript 查找路径的长度，然后设置 stroke-dashoffset 和 stroke-dasharray 因为形状是动态的。一个简单的演示如下所示

var path = document.querySelector("path");
path.style.strokeDasharray = path.getTotalLength();
path.style.strokeDashoffset = path.getTotalLength();
path.style.strokeLinecap = "round";
setTimeout(function(){
	path.style.transition = "stroke-dashoffset 1s"
	path.style.strokeDashoffset = 0;
},1000)

<svg width="200" height="200">
    <path d="m10,10 h100 v100 h-100 v-100" stroke="black" fill="none" stroke-width="2"/>
</svg>

上面的代码片段在 Chrome 中完美运行。但在 Firefox 和 Edge 中，在线条动画之前会出现一个点。它仅在指定了 stroke-linecap=round 时出现。否则它会按预期工作。 Fiddle.

火狐:

关于如何删除点的任何想法？

Answer 1

这可以说是一个错误，但它的发生是因为你的破折号偏移量恰好从破折号结束的地方开始。所以浏览器认为在间隙开始之前有一个零长度的破折号。圆帽被添加到一行的末尾 - 即使它的长度为零。

dash-array = 20 20
####################                    ####################
                   ^
                   dashoffset = 20

解决此问题的一种简单方法是使破折号图案的间隙比实心部分宽。然后在间隙内开始动画，而不是在它的开头。

dash-array = 20 21
####################                     ####################
                    ^
                    dashoffset = 20.5

点消失了。

var path = document.querySelector("path");
path.style.strokeDasharray = [path.getTotalLength(), path.getTotalLength() + 1].join(' ');
path.style.strokeDashoffset = path.getTotalLength() + 0.5;
path.style.strokeLinecap = "round";
setTimeout(function(){
	path.style.transition = "stroke-dashoffset 1s"
	path.style.strokeDashoffset = 0;
},1000)

path {
  stroke-width: 10;
}

<svg width="200" height="200">
    <path d="m10,10 h100 v100 h-100 v-100" stroke="black" fill="none" stroke-width="2"/>
</svg>