Существует SVG из Material Icons
&::after {
font-family: 'Material Icons Round';
content: 'r_expand_more';
position: absolute;
top: 13px;
right: 17px;
font-size: 18px;
color: $c-new-gray;
transition: transform;
transform-origin: 50% 50%;
transition-duration: $duration-hover;
}
И transform для этой SVG
&.isActive::after {
transform: rotate(180deg);
}
При раскрытии выпадашки она должна вращаться вокруг своей оси на 180 градусов.
Согласно MDN мы гарантируем это с помощью transform-origin: 50% 50%;
Статья MDN про transform-origin
Статья MDN про transform-origin в контексте именно SVG
Однако в моем случае она вращается относительно начала своих координат, какие бы значения я не использовал для transform-origin
Также есть потрясающая статья, очень много рассказывающая про еще один атрибут для правильного позиционирования центра для SVG, с использованием transform-box: fill-box;
.
Однако изменения этого параметра тоже никаких результатов не принесло.
По итогу я имею вот этот код
&.isActive::after {
transform: rotate(180deg);
}
&::after {
font-family: 'Material Icons Round';
content: 'r_expand_more';
position: absolute;
top: 13px;
right: 17px;
font-size: 18px;
color: $c-new-gray;
transition: transform;
transform-origin: 50% 50%;
transform-box: fill-box;
transition-duration: $duration-hover;
}
И в нем стрелочка выпадающего списка вращается все равно относительно (0,0), а не относительно своего центра. Возможно, проблема в том, что это SVG из библиотеки, а не хардкод. Если так, то вероятно придется отказаться от такого подхода в будущем в пользу background: url('/svg/chevron.svg')
- здесь вообще не было проблем с анимацией.