带有 d: 路径的 Svg 动画

Posted 2023-03-28

【中文标题】带有 d: 路径的 Svg 动画

【英文标题】：Svg animation with d: path

【发布时间】：2022-01-14 06:21:21

【问题描述】：

我正在尝试按照 this codepen 使用 path 属性为我的 svg 设置动画，但我的动画路径并不顺畅，并且有一些奇怪的步骤。 path 值是否有问题或者我在这里做错了什么？

.p-4 path 
  d: path("");
  fill: #ff9fba;
  animation-name: dash;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;



@keyframes dash 
  0% 
    d: path("");
  
  25% 
    d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572a3.033,3.033,0,0,1,1.216,4.057,2.967,2.967,0,0,1-3.985,1.266c-.29-.15-.788-.47-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
  
  50% 
    d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572c2.935,1.514,5.3,1.92,7.007,1.2,3.235-1.366,4.915-6.892,6.265-11.331l3.13.02,2.61,1.726c-1.714,5.637-3.848,12.653-9.671,15.113-3.426,1.447-7.5.975-12.11-1.4-.29-.15-.788-.469-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
  
  75% 
    d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572c2.935,1.514,5.3,1.92,7.007,1.2,3.235-1.366,4.915-6.892,6.265-11.331l3.273-.478-2.89-.8c2.144-7.713,7.106-11.175,14.747-10.291a3,3,0,0,1,2.635,3.325,3,3,0,0,1-3.325,2.635c-5.923-.685-7.377,2.705-8.276,5.937l-.423,1.42c-1.714,5.637-3.848,12.653-9.671,15.113-3.426,1.447-7.5.975-12.11-1.4-.29-.15-.788-.469-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
  
  100% 
    d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572c2.935,1.514,5.3,1.92,7.007,1.2,3.235-1.366,4.915-6.892,6.265-11.331l3.273-.478-2.89-.8c2.144-7.713,7.106-11.175,14.747-10.291,3.293.381,11.241-.41,13.927-15.954a3,3,0,0,1,3.467-2.445A3,3,0,0,1-289,971.059c-3.658,21.167-16.638,21.342-20.529,20.892-5.923-.685-7.377,2.705-8.276,5.937l-.423,1.42c-1.714,5.637-3.848,12.653-9.671,15.113-3.426,1.447-7.5.975-12.11-1.4-.29-.15-.788-.469-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
  

 <svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 89.095 67.442" class="usp_overlap_photo p-4">
                                <path id="home-usp4-p4" transform="translate(378.051 -967.547)"/>
                              </svg>

【问题讨论】：

路径必须具有相同数量和类型的命令字母。您的路径至少看起来是不同的长度。

@RobertLongson，你知道我怎样才能得到正确的路径值吗？因为最初我只有100% 的路径值。我通过删除其他路径（切割长度）在设计工具中生成了其他路径值并再次将它们生成为 svg 并复制它们的路径值，我不知道这是否是正确的方法。

请阅读How SVG Line Animation Works

【参考方案1】：

如果将形状变成带有笔触的路径而不是带有填充的形状的轮廓，可以吗？

在这里，我重构了形状并为 stroke-dasharray 设置了动画，而不是 d 属性。

.p-4 path 
  fill: none;
  stroke: #ff9fba;
  stroke-width: 5px;
  stroke-linecap:round;
  animation-name: dash;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;



@keyframes dash 
  0% 
    stroke-dasharray: 0 100;
  
  25% 
    stroke-dasharray: 25 100;
  
  50% 
    stroke-dasharray: 50 100;
  
  75% 
    stroke-dasharray: 75 100;
  
  100% 
    stroke-dasharray: 100 100;
  

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100" class="usp_overlap_photo p-4">
  <path transform="translate(5 5)" id="home-usp4-p4" d="M 0,63 C 0,63 5,23 32,38 43,45 49,42 53,33 57,24 56,19 69,19 82,20 85,0 85,0" pathLength="100" stroke-dashoffset="0"/>
</svg>

好吧，那么我们不需要关键帧中的所有键：

.p-4 path 
  fill: none;
  stroke: #ff9fba;
  stroke-width: 5px;
  stroke-linecap:round;
  animation-name: dash;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;



@keyframes dash 
  0% 
    stroke-dasharray: 0 100;
  
  100% 
    stroke-dasharray: 100 100;
  

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100" class="usp_overlap_photo p-4">
  <path transform="translate(5 5)" id="home-usp4-p4" d="M 0,63 C 0,63 5,23 32,38 43,45 49,42 53,33 57,24 56,19 69,19 82,20 85,0 85,0" pathLength="100" stroke-dashoffset="0"/>
</svg>