Вращение SVG с помощью transform

Question

Существует 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') - здесь вообще не было проблем с анимацией.

Answer 1

Взял иконку material icons из Google Fonts

При таких правилах CSS (как и у вас) иконка вращается вокруг своего центра

transform-origin:center;
transform-box:fill-box;

#chevron {
transform-origin:center;
transform-box:fill-box;
transition:all 0.5s;
}
svg:hover #chevron {
transform: rotate(180deg);
}

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">
<path id="rect" d="M0 0h24v24H0V0z" fill="#d3d3d3"/>
<path id="chevron" d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"/>
</svg>

Эту же иконку шеврона можно подключить с помощью

Google-Fonts

Подключение шрифта:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Выбирать иконки по названиям можно здесь

span {
  margin: 0.5em;
  transition: transform 1s ease-in-out;
}
span:hover {
  transform: rotate(180deg); 
 }

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span class="material-icons">expand_less</span>

Answer 2

Я разобрался в вопросе. Все работает прекрасно. Большое спасибо @Alexandr_TT за ответ.

Начну с описания стека проекта. Здесь Vue 3 + Quasar. Таким образом для добавления иконок из Material Icons Google я руководствовался документацией Quasar.

Вот дока Quasar про использование WebFont

Там приведена таблица с примерами использования иконок в элементах q-icon через атрибут name. Поскольку мне нужна была иконка стрелочки с закругленными краями - мне нужно по логике из этой таблицы к названию иконки из Material Icons Round (в моем случае иконка expand_more) добавить префикс r_.

Это решение работало прекрасно, иконка отображалась. Вот только есть одно НО. Не работало вращение вокруг своей оси.

Все дело в том, что правила добавления префиксов для имплементации SVG иконок актуальны ТОЛЬКО ДЛЯ q-icon

В моем случае

 &::after {
    font-family: 'Material Icons Round';
    content: 'r_expand_more';

правило с префиксами НЕ АКТУАЛЬНО, так как не имеет отношения к Quasar. Поэтому для использования иконки с закругленными мы оставляем font-family: 'Material Icons Round' и просто убираем префикс. Таким образом код

&.isActive::after {
    transform: rotate(180deg);
  }

  &::after {
    font-family: 'Material Icons Round';
    content: 'expand_more';
    position: absolute;
    top: 13px;
    right: 17px;
    font-size: 18px;
    color: $c-new-gray;
    transition: transform;
    transition-duration: $duration-hover;
  }

будет прекрасно работать. Иконка с закругленными краями и при это вращение работает корректно.

ВЫВОД: внимательно читайте документацию.

БЛОГ НА HUSL

Вращение SVG с помощью transform

Ответы (2 шт):

Google-Fonts