SVG stroke-dashoffset 动画打破封闭路径

Question

我正在使用 SVG stroke-dashoffset 和一系列路径制作一个简单的动画。

问题是：在没有动画的情况下，内联 SVG 有两个角度非常锐利的三角形，并且可以正确渲染。当我添加动画时，SVG 没有正确关闭这些路径，它们似乎有偷工减料。

我做错了什么？

*{
  box-sizing:border-box;
}
html,body{
  width:100%;
  height:100%;
  background-color:black;
  flex-direction:column;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo-wrap{
  width:35vw;
}
#logo{
  width:100%;
  stroke:white;
    stroke-miterlimit:10;
    stroke-width:5.5px;
  fill-opacity:0;
}
#logo_b { 
  margin-top:30px;
    width:100%;
  stroke:white;
    stroke-miterlimit:10;
    stroke-width:5.5px;
  fill-opacity:0;
    stroke-dasharray: 3500;
  stroke-dashoffset: 3500;
  animation: dash 6s cubic-bezier(0.550, 0.085, 0.680, 0.530) forwards 1s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

<div class="logo-wrap">
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1166.86 661.24"> <path class="cls-1" d="M1166.86.5H502.58l23.73 47.29c-98.19-76.17-239.52-58.31-315.69 39.87a224.28 224.28 0 00-25.17 40.77V.5H0M980.57 90.94V.5"/> <path class="cls-1" d="M705.68 157l208.49.23v237.2L727.84 517.8a161.4 161.4 0 01-86.35 26.92h-2.91c-1.7 0-3.41 0-5.08-.09-24.39-.81-49.12-8.29-71.51-21.65l-62.42-37.22c-30.33-18.09-64.13-28.13-97.74-29-1.76 0-3.57-.07-5.37-.07s-3.9 0-5.83.08c-29.15.81-59.11 8.73-86.64 22.9l-141.5 75.27V23.43H0"/> <path class="cls-1" d="M1166.86 45.94H1027l-.18 89-332.41-.15m-306 272H757.3L576.21 45.94h360.44v360.55l-196.39 130a184 184 0 01-98.34 30.65h-5.22c-29.36-.32-59-8.9-85.68-24.81l-61.9-36.88c-28.88-17.22-61.23-26.32-93.54-26.32-4.17 0-8.39.16-12.53.46-1.73.13-3.49.28-5.24.46a179 179 0 00-62.29 18.71L140 589.86V45.94H0"/> <path class="cls-1" d="M1166.86 68.43h-117.41l-.18 90.56-90.14-.15v259.73L752.67 555.28a206.37 206.37 0 01-110.32 34.38h-3.7c-1.87 0-3.76 0-5.63-.08-31.68-.9-63.64-10.43-92.44-27.56l-63.09-37.49c-23.76-14.13-50.11-22-76.22-22.81-1.61-.05-3.23-.07-4.81-.07-1.75 0-3.52 0-5.26.08-22.2.7-44.2 6.45-65.55 17.06L117.53 624.73V68.43H0"/> <circle class="cls-1" cx="388.37" cy="225.6" r="181.24"/> <path class="cls-1" d="M1166.86 90.89h-95l-.18 90.59-90.1-.15v249.31L765.08 574a228.84 228.84 0 01-122.31 38.12h-4.12c-2 0-4.16 0-6.26-.09-35.31-1-70.9-11.59-102.9-30.61l-63.34-37.61c-20.48-12.17-43.15-19-65.55-19.65q-2.07-.06-4.14-.06c-1.52 0-3 0-4.51.07-18.86.61-37.7 5.49-56 14.53L95.06 660.43V90.89H0"/> <path class="cls-1" d="M1166.86 23.43h-162.29l-.18 90.48-46.78-.08v-90.4H539.79l181.09 360.94H513.33a201.89 201.89 0 0076.93-158.45v-.64c0-111.32-90.57-201.85-201.89-201.85S186.48 114 186.48 225.28v.64c0 111.32 90.56 201.88 201.89 201.88h402.9L610.18 66.9"/> <circle class="cls-1" cx="388.37" cy="225.6" r="158.01"/> <circle class="cls-1" cx="388.37" cy="225.6" r="135.65"/> <path class="cls-1" d="M683.1 111.99l229.56.28V68.41h-274.9l180.9 360.48 71.52-47.36V181.18l-172.48-.23M638.58 522.27c-1.47 0-2.92 0-4.33-.07-20.9-.69-42.09-7.12-61.29-18.57l-66.91-39.94a209.14 209.14 0 00-26.46-13.41H789.1l-73.68 48.79a139.07 139.07 0 01-74.35 23.18zM607.42 198.74S621.64 288 556.88 367.6c0 0 86.35.17 129.52 0zM333.14 443.43C230.36 420.28 185 320.56 185 320.56V520c55.83-30.78 105.31-59 105.31-59 30.69-16 42.83-17.57 42.83-17.57z"/></svg></div>
</div>
<div class="logo-wrap">
<div class="dolly"><svg id="logo_b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1166.86 661.24"> <path class="cls-1" d="M1166.86.5H502.58l23.73 47.29c-98.19-76.17-239.52-58.31-315.69 39.87a224.28 224.28 0 00-25.17 40.77V.5H0M980.57 90.94V.5"/> <path class="cls-1" d="M705.68 157l208.49.23v237.2L727.84 517.8a161.4 161.4 0 01-86.35 26.92h-2.91c-1.7 0-3.41 0-5.08-.09-24.39-.81-49.12-8.29-71.51-21.65l-62.42-37.22c-30.33-18.09-64.13-28.13-97.74-29-1.76 0-3.57-.07-5.37-.07s-3.9 0-5.83.08c-29.15.81-59.11 8.73-86.64 22.9l-141.5 75.27V23.43H0"/> <path class="cls-1" d="M1166.86 45.94H1027l-.18 89-332.41-.15m-306 272H757.3L576.21 45.94h360.44v360.55l-196.39 130a184 184 0 01-98.34 30.65h-5.22c-29.36-.32-59-8.9-85.68-24.81l-61.9-36.88c-28.88-17.22-61.23-26.32-93.54-26.32-4.17 0-8.39.16-12.53.46-1.73.13-3.49.28-5.24.46a179 179 0 00-62.29 18.71L140 589.86V45.94H0"/> <path class="cls-1" d="M1166.86 68.43h-117.41l-.18 90.56-90.14-.15v259.73L752.67 555.28a206.37 206.37 0 01-110.32 34.38h-3.7c-1.87 0-3.76 0-5.63-.08-31.68-.9-63.64-10.43-92.44-27.56l-63.09-37.49c-23.76-14.13-50.11-22-76.22-22.81-1.61-.05-3.23-.07-4.81-.07-1.75 0-3.52 0-5.26.08-22.2.7-44.2 6.45-65.55 17.06L117.53 624.73V68.43H0"/> <circle class="cls-1" cx="388.37" cy="225.6" r="181.24"/> <path class="cls-1" d="M1166.86 90.89h-95l-.18 90.59-90.1-.15v249.31L765.08 574a228.84 228.84 0 01-122.31 38.12h-4.12c-2 0-4.16 0-6.26-.09-35.31-1-70.9-11.59-102.9-30.61l-63.34-37.61c-20.48-12.17-43.15-19-65.55-19.65q-2.07-.06-4.14-.06c-1.52 0-3 0-4.51.07-18.86.61-37.7 5.49-56 14.53L95.06 660.43V90.89H0"/> <path class="cls-1" d="M1166.86 23.43h-162.29l-.18 90.48-46.78-.08v-90.4H539.79l181.09 360.94H513.33a201.89 201.89 0 0076.93-158.45v-.64c0-111.32-90.57-201.85-201.89-201.85S186.48 114 186.48 225.28v.64c0 111.32 90.56 201.88 201.89 201.88h402.9L610.18 66.9"/> <circle class="cls-1" cx="388.37" cy="225.6" r="158.01"/> <circle class="cls-1" cx="388.37" cy="225.6" r="135.65"/> <path class="cls-1" d="M683.1 111.99l229.56.28V68.41h-274.9l180.9 360.48 71.52-47.36V181.18l-172.48-.23M638.58 522.27c-1.47 0-2.92 0-4.33-.07-20.9-.69-42.09-7.12-61.29-18.57l-66.91-39.94a209.14 209.14 0 00-26.46-13.41H789.1l-73.68 48.79a139.07 139.07 0 01-74.35 23.18zM607.42 198.74S621.64 288 556.88 367.6c0 0 86.35.17 129.52 0zM333.14 443.43C230.36 420.28 185 320.56 185 320.56V520c55.83-30.78 105.31-59 105.31-59 30.69-16 42.83-17.57 42.83-17.57z"/></svg>
</div>

Answer 1

当您在连接处启动破折号模式时，这是一个已知问题。最简单的解决方法是编辑该路径/子路径，并将路径的开始/结束位置稍微远离拐角。