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

#css #animation #svg

#css #Анимация #svg

Вопрос:

Я отвечал на вопрос о переполнении стека, когда понял, что это может быть ошибка в 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:

И это в Firefox:

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

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

Обновить

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

 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:

Проблема решена после удаления 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>