Точка появляется перед строкой с круглым штриховкой 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: например, 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>