Question

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

我无法使用SVG animationTransform，因为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有一点帮助，但内联微调器仍然没有旋转原点。

Answer 1

我看着你的傻瓜，虽然我不相信我能回答起源问题，内联旋转器很容易解决。

您将width和height设置为20px（只是实际尺寸的一半）。

将spinner-inline css设置为：

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

他们将不再重叠。

*或者，看起来设置这确实会使旋转器旋转原点。

Answer 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

SVG微调器不会在原点

2 个答案: