css - 动画 SVG 沿路径长度线性填充

Question

我有一个 SVG 文件，它表示一个薄的形状。我想制作一个动画，使 整个形状 看起来正在被拉出。

我所说的三星 Galaxy S 品牌的“S”标志示例: https://codepen.io/anon/pen/MGawzy

动画代码(因为 StackOverflow 强制我包含它):

@keyframes test {
  0% {
    clip-path: inset(0px 0px 300px 0px);
  }
  80% {
    clip-path: inset(0px 0px 0px 0px);
  }
  100% {
    clip-path: inset(0px 0px 0px 0px);
  }
}

svg {
  animation: test;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

上面示例中的简单 SVG 很容易制作动画，我可以慢慢地从上到下取消裁剪 SVG。但是，如果我有一个非常复杂的形状，无法以这种方式进行动画处理(可能是 NASA Logo 中的红线:https://upload.wikimedia.org/wikipedia/commons/e/e5/NASA_logo.svg)，我需要一个更好的解决方案。

再次澄清一下，我不想为笔画设置动画。我希望能够为填充设置动画，就像它开始绘制一样。

有什么通用的解决方案吗？如果没有通用解决方案，我将如何在合理的时间内自行确定关键帧？

编辑:为了提供一些见解，我正在尝试为高音谱号制作动画:https://upload.wikimedia.org/wikipedia/commons/e/e8/G-clef.svg

Answer 1

您可以这样做(描述起来比做起来容易，涉及很多繁琐的工作):

1. 在形状的顶部绘制一条平滑的路径，遵循您认为的“路径”，并选择这样的笔划宽度，使路径覆盖整个形状。
2. 我会将最后一个点完全排除在外，因为它比其他点粗得多。
3. 以没有重叠部分的方式划分路径。按绘图顺序排列零件，确保每条部分路径都以正确的方向绘制。
4. 现在以同样的方式划分形状，确保每个部分都恰好位于顶部路径的下方。
5. 将每个形状与顶部的路径之一相关联，将路径定义为形状的 mask 。路径必须有 stroke:white。保持秩序。
6. 现在您可以使用 stroke-dashoffset animation 为定义蒙版的路径设置动画。 .
7. 我会简单地隐藏最后一个点，直到伪线动画结束，然后立即显示它。

编辑:我今天的时间肯定太多了，这是工作结果:

.clef {
    fill: black;
    stroke: black;
    stroke-width: 0.1;
}
mask path {
    fill: none;
    stroke: white;
    stroke-width: 6;
}
#mask1 path {
    stroke-dasharray: 100.8186 100.8186;
    stroke-dashoffset: 100.8186;
    animation: draw1 1s linear forwards;
}
@keyframes draw1 {
    from { stroke-dashoffset: 100.8186; }
    to { stroke-dashoffset: 0; }
}
#mask2 path {
    stroke-dasharray: 83.6713 83.6713;
    stroke-dashoffset: 83.6713;
    animation: draw2 1s 1s linear forwards;
}
@keyframes draw2 {
    from { stroke-dashoffset: 83.6713; }
    to { stroke-dashoffset: 0; }
}
.dot {
    opacity: 0;
    animation: reveal 0s 2.5s forwards;
}
@keyframes reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="200" viewBox="0 0 44 75">
  <defs>
  <mask id="mask1" maskUnits="userSpaceOnUse">
      <path d="M 24.3018,49.658 C 15.0191,46.9092 18.5393,38.1126 25.6256,38.2163 35.5458,38.3614 34.8431,54.3874 22.6943,54.1023 12.0123,53.8516 7.34095,40.0402 18.4391,30.1787 29.5373,20.3173 29.9235,12.5622 27.8005,9.28112" />
  </mask>
  <mask id="mask2" maskUnits="userSpaceOnUse">
      <path d="M 27.8005,9.28112 C 25.1382,5.16638 17.6602,8.86888 20.5194,22.1412 L 28.1788,57.6956 C 31.6264,73.699 16.4903,72.3627 15.035,62.329" />
  </mask>
  </defs>
  <path class="clef" mask="url(#mask1)" d="M 26.8522,9.90048 C 26.912,9.95039 26.9649,10.0085 27.0101,10.075 27.4815,10.7683 28.6214,14.0098 25.3767,19.8157 22.846,24.3437 11.0718,30.2815 10.2077,40.9075 9.45969,50.1477 19.1325,56.9723 27.4811,54.2894 33.0239,52.5081 35.8812,44.0959 32.4504,39.7568 23.3964,28.3057 8.87616,45.8309 22.9422,50.6319 21.4126,49.4286 20.37,48.4968 20.1759,47.3578 18.286,36.2692 34.9591,39.1968 30.4666,49.7165 28.6194,54.0421 21.1577,54.879 16.9085,51.0198 13.3489,47.787 11.7693,41.5593 15.7305,37.0885 21.0956,31.0332 27.4302,25.5974 29.1125,17.3081 29.7841,13.9988 29.4887,10.9357 28.6445,8.70078 Z" />
  <path class="clef" mask="url(#mask2)" d="M 15.7311,63.3465 C 15.3353,65.46 17.5402,69.8491 21.9764,69.9924 27.3392,70.1658 30.7655,66.0634 29.1692,59.3682 L 21.164,22.4229 C 20.2111,18.0249 20.9262,15.6394 21.4351,14.2178 22.7185,10.6326 25.8192,9.03863 26.8522,9.90048 L 28.6445,8.70078 C 26.9883,4.31578 23.2199,3.11893 20.4997,9.50576 19.1217,12.7412 18.6085,15.989 19.9279,22.2128 L 27.9268,59.9444 C 28.4995,62.6457 28.1161,66.3629 25.595,68.0714 24.3461,68.9177 19.9267,69.5001 18.8455,67.48" />
  <path class="clef dot" d="M 15.6702,63.6634 A 3.77139,3.8362 1.075 0 1 19.5129,59.8986 3.77139,3.8362 1.075 0 1 23.2116,63.8049 3.77139,3.8362 1.075 0 1 19.3689,67.5697 3.77139,3.8362 1.075 0 1 15.6702,63.6634 Z" />
</svg>