Почему смена заливки букв происходит не плавно?

#html #css #svg

При наведении на SVG-элемент заливка меняется не плавно, хотя я прописал для класса
с буквами transition, с чем это связано и как можно исправить? 



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cls-1 {
  font-size: 28px;
  fill: none;
  stroke: #1d1d1b;
  stroke-width: 0.5px;
  font-family: PFDinDisplayPro-Black, PF DinDisplay Pro;
  letter-spacing: -0.07em;
}

.cls-2 {
  letter-spacing: -0.18em;
}

.cls-3 {
  letter-spacing: -0.16em;
}

.cls-4 {
  letter-spacing: -0.17em;
}

.cls-5 {
  letter-spacing: -0.13em;
}

.cls-6 {
  letter-spacing: -0.09em;
}

.cls-7 {
  letter-spacing: -0.08em;
}

.cls-8 {
  letter-spacing: -0.13em;
}

.cls-9 {
  letter-spacing: -0.11em;
}

.cls-10 {
  letter-spacing: -0.1em;
}

svg:hover .letter {
  fill: black;
}

.letter {
  transition: .3s;
}




    

Ответы

Ответ 1

Поменяйте fill: none на fill: transparent. Ситуация похожа с display: noneв display:
block:



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cls-1 {
  font-size: 28px;
  fill: transparent;
  stroke: #1d1d1b;
  stroke-width: 0.5px;
  letter-spacing: -0.07em;
}

.cls-2 {
  letter-spacing: -0.18em;
}

.cls-3 {
  letter-spacing: -0.16em;
}

.cls-4 {
  letter-spacing: -0.17em;
}

.cls-5 {
  letter-spacing: -0.13em;
}

.cls-6 {
  letter-spacing: -0.09em;
}

.cls-7 {
  letter-spacing: -0.08em;
}

.cls-8 {
  letter-spacing: -0.13em;
}

.cls-9 {
  letter-spacing: -0.11em;
}

.cls-10 {
  letter-spacing: -0.1em;
}

svg:hover .letter {
  fill: black;
}

.letter {
  transition: .3s;
}