点在与圆形线帽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.

Firefox：

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

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>

Answer 2

您可以使用以下杀手方式： 将css输入到您的svg路径中：如<ScrollView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/view_pager" android:fillViewport="true" android:focusableInTouchMode="true" app:layout_constrainedHeight=”true" app:layout_constraintBottom_toTopOf="@+id/tabLayout" app:layout_constraintTop_toTopOf="parent"> 并将path{stroke-opacity: 0;}添加到您的Timeout函数中。 请参见上面的代码

希望获得帮助。

让我知道进一步的澄清。

path.style.strokeOpacity = "1";

  
  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;}