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

问题描述

我正在尝试使用 SVG 做一个简单的画线动画.我使用 javascript 来查找路径的长度，然后设置 stroke-dashoffset 和 stroke-dasharray 因为形状是动态的.下面是一个简单的演示

var path = document.querySelector("path");path.style.strokeDasharray = path.getTotalLength();path.style.strokeDashoffset = path.getTotalLength();path.style.strokeLinecap = "圆形";设置超时(功能(){path.style.transition = "stroke-dashoffset 1s"path.style.strokeDashoffset = 0;},1000)

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

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

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

解决方案

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

dash-array = 20 20######################################^破折号 = 20

解决此问题的一种简单方法是使虚线图案具有比实体部分更宽的间隙.然后在间隙内开始动画，而不是在它的开头.

dash-array = 20 21######################################^破折号 = 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 = "圆形";设置超时(功能(){path.style.transition = "stroke-dashoffset 1s"path.style.strokeDashoffset = 0;},1000)

path {笔画宽度:10；}

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

I am trying to do a simple line drawing animation using SVG.I am using javascript to find the length of the path and then set the stroke-dashoffset and stroke-dasharray as the shapes are dynamic.A simple demo is shown below

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>

The above snippet works perfectly in Chrome. But in Firefox and Edge a dot appears before the line is animated. It appears only if stroke-linecap=round is specified. Otherwise it works as intended. Fiddle.

Firefox:

Any ideas on how to remove the dot ?

解决方案

It's arguably a bug, but it occurs because your dash offset starts exactly where the dash ends. So the browser considers that there is a zero-length dash before the gap starts. Round caps are added to the end of a line - even if it has zero length.

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

One easy way to work around this is to make the dash pattern have a gap that's wider than the solid part. Then start the animation within the gap, instead of right at the start of it.

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

And the dot goes away.

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>

这篇关于点出现在带有圆形线帽 FF,IE 的行之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！