javascript - svg元素的自下而上的CSS动画

Question

是否有一种纯 CSS 方法来使 SVG 矩形元素自下而上地显示动画，但从某个点开始，而不是从父底部开始？

例如，假设我有一个 <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>