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>

SVG元素的自底向上CSS动画

1 个答案: