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

Posted 2023-03-06

技术标签:

【中文标题】按矩形中心垂直对齐 SVG 内的矩形元素【英文标题】：Vertically Align Rect Elements Inside SVG By Center of Rect 【发布时间】：2014-10-18 20:42:43 【问题描述】：

目标：

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

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

我有什么：

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

<svg version="1.1" baseProfile="full"   xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <rect class="rect1" fill="black"   x="0" />
  <rect class="rect2" fill="black"   x="10" />
  <rect class="rect3" fill="black"   x="20" />
  <rect class="rect4" fill="black"   x="30" />
  <rect class="rect5" fill="black"   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。

【问题讨论】：

【参考方案1】：

好的，所以我想出了这个问题的答案，它可以在 Chrome 和 Firefox 中运行。 IE 不支持对 SVG 元素进行 CSS 转换（尽管它确实支持 transform 属性，我正在尝试找出解决方法）。

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

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

HTML：

<svg version="1.1" baseProfile="full"   xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <rect class="rect1" fill="black"  transform="translate(2,2)"  x="0" y="0" />
  <rect class="rect2" fill="black"   x="10" y="0" />
  <rect class="rect3" fill="black"   x="20" y="0" />
  <rect class="rect4" fill="black"   x="30" y="0" />
  <rect class="rect5" fill="black"   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;