При наведении на 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;
}
Ответ
Поменяйте 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;
}
Комментариев нет:
Отправить комментарий