通过Rect的中心垂直对齐SVG内的矩形元素

Question

目标：

我在网上找到了一个tutorial来制作一个CSS3无限加载图标，使用长度增长和缩小的矩形。他们最终看起来像：

它使用包裹在外div中的5个div，并且效果很好。我想尝试使用SVG重新创建效果，这样我只需要一个图像就可以引用它，而不必添加5个HTML元素。

---

我有什么：

我开始使用相同的CSS动画代码，并在rect标记内使用了5 svg个。动画效果很好，但我不能让矩形垂直居中。由于它们是使用x和y坐标放置的，这些坐标对应于每个矩形的顶部/左侧点，因此它们固定在该位置。

<svg version="1.1" baseProfile="full" width="250" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <rect class="rect1" fill="black" height="30" width="6" x="0" />
  <rect class="rect2" fill="black" height="30" width="6" x="10" />
  <rect class="rect3" fill="black" height="30" width="6" x="20" />
  <rect class="rect4" fill="black" height="30" width="6" x="30" />
  <rect class="rect5" fill="black" height="30" width="6" x="40" />
</svg>

rect {
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
  alignment-baseline:bottom;
}

.rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

请参阅工作示例： http://codepen.io/Kelderic/pen/vuipF

有一件事很奇怪，它在CodePen中运行，相同的代码并没有在JSFiddle中运行。当我将CodePen作为SVG嵌入时，它也不会运行。

---

问题

使用这样的CSS动画应该适用于SVG元素，我可以在中心修复它们以匹配原始动画吗？

---

修改

js1568的回答提供了什么应该是一个解决方案，它确实可以让Chrome工作正常。但它在Firefox中没有任何影响，经过一些研究后我发现我并不是唯一一个与Firefox有同样问题的人。

Setting transform-origin on SVG group not working in FireFox

我认为这里唯一的答案是，此时此功能无法在所有浏览器中运行。 （如果有人知道某种方式，请随时添加答案！）

---

编辑2

我想方设法在Firefox中完成这项工作，在下面的答案中解释。尽管如此，仍然没有IE9-11。

Answer 1

好的，所以我找到了答案，它适用于Chrome和Firefox。 IE不支持SVG元素的CSS转换（尽管它确实支持转换属性，我试图找出一种解决方法）。

我没有尝试将基线设置为rect元素的中心，而是使用第二个动画。我上下移动元素，按时间同步。这会创建元素垂直居中的外观。

在使用0.4比例时，我遇到了一些问题让它完全同步，所以我改为0.5，看起来还不错。

HTML：

<svg version="1.1" baseProfile="full" width="250" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <rect class="rect1" fill="black" height="30" transform="translate(2,2)" width="6" x="0" y="0" />
  <rect class="rect2" fill="black" height="30" width="6" x="10" y="0" />
  <rect class="rect3" fill="black" height="30" width="6" x="20" y="0" />
  <rect class="rect4" fill="black" height="30" width="6" x="30" y="0" />
  <rect class="rect5" fill="black" height="30" width="6" x="40" y="0" />
</svg>

CSS：

@-webkit-keyframes stretchdelay {
  0% { 
    -webkit-transform: scaleY(1.0) translate(0,0);
  }  30%,70% { 
    -webkit-transform: scaleY(0.5) translate(0,15px);
  } 100% { 
    -webkit-transform: scaleY(1.0) translate(0,0);
  }
}

@keyframes stretchdelay {
  0% { 
    transform: scaleY(1.0) translate(0,0);
    -webkit-transform: scaleY(1.0) translate(0,0);
  }  30%,70% { 
    transform: scaleY(0.5) translate(0,15px);
    -webkit-transform: scaleY(0.5) translate(0,15px);
  } 100% { 
    transform: scaleY(1.0) translate(0,0);
    -webkit-transform: scaleY(1.0) translate(0,0);
  }
}

rect {
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
  -ms-animation: stretchdelay 1.2s infinite ease-in-out;
}

.rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

结果：

（注意，最近CodePen添加了一项功能，允许您嵌入在线创建的SVG作为SVG图像。我今天发现，因为我创建了这个，所有CSS必须放在HTML输入框内的<style>标签中。如果它放在CSS框中，它将无法工作。）

Answer 2

我已编辑您的codepen以包含transform-origin个样式：

http://codepen.io/anon/pen/ojgwr

这是你想要的效果吗？