自下而上svg元素的CSS动画

Question

是否有一种纯粹的CSS方式来动画自上而下出现的SVG rect元素，但是从某个点开始，而不是从父母底部出现？

例如，假设我有一个位于轴上的<rect>元素，我希望它从轴向上扩展：

rect {
  fill: lightgreen;
  stroke: green;
  stroke-width: 2;
  animation: expand 0.75s ease;

  /* transform-origin: top bottom; */
  transform-origin: 0 100%;
}

@keyframes expand {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

line {
  stroke: black;
  stroke-width: 2;
  fill: none;
}

text {
  font: italic 20px serif;
  fill: gray;
}

<svg height="200px" width="100px">
  <rect x="5" y="50" height="100" width="50"></rect>
  <line x1="5" y1="150" x2="90" y2="150"></line>
  <text x="5" y="170">axis</text>
</svg>

如示例所示，它从父母底部扩展（因为transform-origin属性）。有没有一种纯粹的CSS方法来从轴上扩展它，而不改变<svg>的大小？什么是JS替代（但没有jQuery）？

Answer 1

您可以将translateY添加到变换中，使用矩形的一半高度作为起始偏移量。

rect {
  fill: lightgreen;
  stroke: green;
  stroke-width: 2;
  animation: expand 0.75s ease;

  /* transform-origin: top bottom; */
  transform-origin: 0 100%;
}

@keyframes expand {
  from {
    transform: translateY(-50px) scaleY(0);
  }

  to {
    transform: translateY(0px) scaleY(1);
  }
}

line {
  stroke: black;
  stroke-width: 2;
  fill: none;
}

text {
  font: italic 20px serif;
  fill: gray;
}

<svg height="200px" width="100px">
  <rect x="5" y="50" height="100" width="50"></rect>
  <line x1="5" y1="150" x2="90" y2="150"></line>
  <text x="5" y="170">axis</text>
</svg>