Возможная ошибка: stroke-linecap = "round" искажается в Firefox во время анимации - PullRequest
Новая
       16

Возможная ошибка: stroke-linecap = "round" искажается в Firefox во время анимации

0 голосов
/ 13 апреля 2019

Я отвечал на вопрос о переполнении стека, когда понял, что это может быть ошибка в Firefox при анимации строки с stroke-linecap="round" с помощью vector-effect="non-scaling-stroke"

svg{border:1px solid}


path{
  animation: draw 1s ease-in;
  animation-fill-mode: forwards;
}

@keyframes draw {
  from{transform:scale(0.1,1)}
  to {transform:scale(1,1)}
}
<svg viewBox="0 0 700 100"> 
<path d="M0,50H500" stroke="blue" stroke-width = "25" stroke-linecap="round" transform="scale(0.1,1)" vector-effect="non-scaling-stroke"/>
</svg>

Это конечный результат в Chrome:

enter image description here

И это в Firefox:

enter image description here

Обратите внимание, что этого не происходит, если путь не анимирован.

Как мне избежать этой проблемы?

UPDATE

Более того: настройка кода, который я придумал: Если я изменю transform="scale(.1,1)" на transform="scale(1,1)", аспект "округлости" будет выглядеть хорошо в конце анимации, однако округлость начинается ровно и поднимается во время анимации, как вы можете видеть на экране. следующий пример:

enter image description here

svg{border:1px solid}


path{
  animation: draw 10s ease-in;
  animation-fill-mode: forwards;
}

@keyframes draw {
  from{transform:scale(0.1,1)}
  to {transform:scale(1,1)}
}
<svg viewBox="0 0 700 100"> 
<path d="M0,50H500" stroke="blue" stroke-width = "25" stroke-linecap="round" transform="scale(1,1)" vector-effect="non-scaling-stroke"/>
</svg>

1 Ответ

0 голосов
/ 13 апреля 2019

Проблема решена после удаления атрибута transform пути.Теперь он работает правильно на Firefox. 

svg{border:1px solid}

path{
  animation: draw 1s ease-in;
  animation-fill-mode: forwards;
}

@keyframes draw {
  from{transform:scale(0.1,1)}
  to {transform:scale(1,1)}
}
<svg viewBox="0 0 700 100"> 
<path d="M0,50H500" stroke="blue" stroke-width = "25" stroke-linecap="round" vector-effect="non-scaling-stroke"/>
</svg>
...