如何在 SVG 上从中心动画进行显示动画？

Question

我有一个看起来像 S 的标志。

<svg width="505" height="732" viewBox="0 0 505 732" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M484.345 238.096C429.731 258.576 385.358 258.576 323.918 238.096C325.056 216.478 308.409 169.208 253.945 173.243C207.865 176.656 201.038 214.203 201.038 238.096C201.038 354.15 323.918 350.736 323.918 487.27C323.918 507.75 321.87 558.95 259.065 558.95C196.259 558.95 187.385 511.163 190.798 487.27H20" stroke="black" stroke-width="50"/>
</svg>

我想做一个显示动画，其中 S 从中心显示并增长，即它最初应该是空的，然后 S 从 SVG 的中心出现，直到它增长并成为 SVG。我该怎么做呢？我已经尝试过使用缩放和变换进行 animateTransform 但我无法让它工作。

Answer 1

首先变换/平移路径，使 0,0 位于路径的中间（或绘制路径，使 0,0 位于中间......）——这将是变换/缩放的原点。其次，创建要缩放的 g 元素，第三，通过添加第二个 g 元素将路径移回到视图框的中间。

svg {
  border: solid black thin;
}

<svg height="200" viewBox="0 0 480 440" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(215 220)">
    <g transform="scale(0)">
      <animateTransform attributeName="transform" attributeType="XML"
        type="scale" from="0" to="1" dur="2s" fill="freeze" repeatCount="1" />
      <path transform="translate(-232.17 -366)" d="M484.345 238.096C429.731 258.576 385.358 258.576 323.918 238.096C325.056 216.478 308.409 169.208 253.945 173.243C207.865 176.656 201.038 214.203 201.038 238.096C201.038 354.15 323.918 350.736 323.918 487.27C323.918 507.75 321.87 558.95 259.065 558.95C196.259 558.95 187.385 511.163 190.798 487.27H20" stroke="black" stroke-width="50"/>
    </g>
  </g>
</svg>