SVG 微调器不在 Origin 上旋转答案

【问题标题】：SVG spinner does not rotate on OriginSVG 微调器不在 Origin 上旋转
【发布时间】：2016-08-16 12:48:16
【问题描述】：

我正在使用由div 包裹的img 标记来显示svg 微调器。 div 上有一个旋转动画。你知道为什么它不在原点上旋转，为什么内联旋转器重叠吗？

我不能使用 SVG 动画转换，因为 IE 不支持它。由于它是一个简单的微调器，我希望只旋转 div 并获得加载效果。

这是 plunkr 演示：

https://plnkr.co/edit/jiuI4rlETsNHN1yLbG2k?p=preview

<div class="spinner">
    <img src="spinner.svg" alt="">
  </div>
  <div class="spinner">
    <img src="spinner.svg" alt="">
  </div>

  <h4>Inline Spinners</h4>
  <div class="spinner-inline">
    <img src="spinner.svg" alt="">
  </div>
  <div class="spinner-inline">
    <img src="spinner.svg" alt="">
  </div>

/* 样式放在这里 */

body{
  background: #444;
  color: white;
}

.spinner{
  display: block;
  height: 50px;
  width: 50px;
  animation: spin 2s linear infinite;
  transform-origin: 50% 50%;
}

.spinner-inline{
  display: inline-block;
  height: 10px;
  width: 10px;
  animation: spin 2s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes spin{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

更新：

.spinner *{
    width: 100%;
    height: 100%;
}


.spinner-inline *{
    width: 100%;
    height: 100%;
}

为子元素添加上面的 CSS 有点帮助，但内联微调器仍然不会在原点上旋转。

【问题讨论】：

您可以使用fakeSmile在IE中启用animateTransform。

标签： html css animation svg

【解决方案1】：

我看了你的 plunkr，虽然我不相信我可以回答起源问题，但内联微调器很容易解决。

您将width 和height 设置为20px（这只是它们实际大小的一半）。

将您的spinner-inline css 设置为：

.spinner-inline{
  display: inline-block;
  height: 40px;
  width: 40px;
  animation: spin 2s linear infinite;
  transform-origin: 50% 50%;
}

它们将不再重叠。

*另外，设置此项似乎确实会使微调器在原点上旋转。

【讨论】：

【解决方案2】：

你的内联微调器在变换原点有偏移的原因是因为默认的line-height (28px) 占据了你的高度，所以重置你解决了原点问题：

.spinner-inline{
  display: inline-block;
  height: 10px;
  line-height:0;/*****/
  width: 10px;
  animation: spin 2s linear infinite;
  transform-origin: 50% 50%;
}

https://plnkr.co/edit/mW7BamvPST89ufqNyE8N?p=preview

【讨论】：