时间戳

首页 > 解决方案 > 圆点出现在带有圆形线帽FF，IE的行之前

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

问题描述

我正在尝试使用 SVG 做一个简单的线条绘制动画。我正在使用 javascript 来查找路径的长度，然后将stroke-dashoffsetand设置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指定时才会出现。否则它会按预期工作。小提琴。

火狐：

在此处输入图像描述

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

标签： javascripthtmlcsssvg

解决方案

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

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>

推荐阅读