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

Question

目标:

我发现了一个在线教程,使用长度增长和缩小的矩形制作CSS3无限加载图标.他们最终看起来像:

它使用5 div秒包裹在外部div,并且完美地工作.我想尝试使用SVG重新创建效果,这样我只需要一个图像就可以引用它,而不必添加5个HTML元素.

---

是)我有的:

我开始使用相同的CSS动画代码,并rect在svg标签内使用了5 秒.动画效果很好,但我不能让矩形垂直居中.由于它们使用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有同样问题的人.

在SVG组上设置transform-origin不在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 都必须放置在<style>HTML 输入框内的标签中。如果将其放置在 CSS 框中，它不会工作。）