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

【问题标题】：Dot appears before line with round linecap FF,IE圆点出现在带有圆形线帽FF，IE的行之前
【发布时间】：2018-12-05 20:03:20
【问题描述】：

我正在尝试使用 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>

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

火狐：

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

【问题讨论】：

将path.style.strokeLinecap = "square"; 移动到setTimeout 怎么样？ jsfiddle.net/dvq58seL/1
有人应该提出 Chrome 错误。 “完美运行”并不是对 Chrome 在这里所做的非常准确的描述。
等待其他浏览器呈现它应该的样子，而 Chrome 做错了吗？ @罗伯特朗森
@akshay 这就是我认为的 FWIW。

标签： javascript html css svg

【解决方案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>

【讨论】：

【解决方案2】：

您可以使用这种杀手级方式：将 css 放入您的 svg 路径：例如 path{stroke-opacity: 0;} 并将 path.style.strokeOpacity = "1"; 添加到您的 Timeout 函数中。 请看上面的代码

希望对您有所帮助。

让我知道进一步的澄清。

  
  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;
  path.style.strokeOpacity = "1";
},2000)

path{stroke-opacity: 0;}

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

【讨论】：

谢谢，您的解决方案也有效。但是我会选择@Paul 的答案，因为我的路径太多，调整笔划 dasharray 会更容易。