我正在尝试使用 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.
火狐:
关于如何删除点的任何想法?
最佳答案
这可以说是一个错误,但它的发生是因为你的破折号偏移量恰好从破折号结束的地方开始。所以浏览器认为在间隙开始之前有一个零长度的破折号。圆帽被添加到一行的末尾 - 即使它的长度为零。
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>
关于javascript - 点出现在带有圆形线帽 FF,IE 的线之前,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53626733/