按矩形中心垂直对齐 SVG 内的矩形元素

Question

目标：

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

它使用 5 个 divs 包裹在一个外部 div 中，并且运行良好。不过，我想尝试使用 SVG 重新创建效果，这样我就可以仅使用图像来引用它，而不必添加 5 个 HTML 元素。

---

我有什么：

我从相同的 CSS 动画代码开始，并在 svg 标记内使用了 5 个 rects。动画效果很好，但我无法让矩形垂直居中。由于它们是使用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 转换（尽管它确实支持 transform 属性，我正在尝试找出解决方法）。

我没有尝试将基线设置为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

这是你想要的效果吗？