css变换原点不从中心缩放答案

【问题标题】：css transform origin not scaling from centercss变换原点不从中心缩放
【发布时间】：2020-02-11 08:00:23
【问题描述】：

我有一个包含三个部分的 svg 图标，fb 徽标，一个当前设置为不可见的破折号环和一个外环。外圈是问题。我正在使用悬停伪选择器来扩展具有 scale() 属性的环。它可以很好地缩放，问题是它向右射击而不是仅仅停留在中心。根据我使用 transform-origin: center 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;}
}

【问题讨论】：

标签： css svg

【解决方案1】：

你是对的，默认不是从中心缩放而是缩放 viewBox。你可以通过添加来解决这个问题

transform-box: fill-box;

例如

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

【讨论】：

谢谢，只是想知道为什么它在没有它的情况下适用于 youtube 徽标但不适用于 facebook 徽标？
YouTube 徽标位于 viewBox 的中心（或足够接近），根据我的回答，我们默认找到的中心是该框。