css исходное преобразование без масштабирования от центра

Question

У меня есть значок SVG с тремя частями, fb lo go, кольцо черточек, которое в настоящее время установлено как невидимое, и внешнее кольцо. внешнее кольцо - проблема. я использую hover psuedo селектор, чтобы расширить кольцо со свойством scale (). он хорошо масштабируется, проблема в том, что он стреляет вправо, а не остается в центре. в соответствии с тем, что я прочитал, используя transform-origin: центр center или 50% 50% должны исправить это (и это было на других логотипах, над которыми я работал), в данном случае это не так.

вот ручка соответствующий код начинается в строке 24

https://codepen.io/cole-pratt/pen/poJJdzy?editors=1100

.facebook-outline, .facebook-detail {
  transition: 300ms all;
  transform-origin: center center;
}

.facebook-detail {
  opacity: 0;
}

.facebook-icon-group:hover {
  .facebook-outline {transform: scale(1.8); opacity: 0;}
}

Answer 1

Вы правы, по умолчанию не масштабируется от центра, это масштабируется viewBox. Вы можете исправить это, добавив

transform-box: fill-box;

например

.facebook-outline, .facebook-detail {
  transition: 300ms all;
  transform-origin: center center;
  transform-box: fill-box;
}

.