css - SVG 动画 : Stroke/Border not complete

Question

我有一个公司 Logo ，我正在尝试使外部(正方形)边框动画进出。我目前正在使用 dasharray 和 dashoffset 属性来帮助我做这件事。 Here是一篇解释它的文章。

我有它的工作，但边框似乎并没有从一开始就开始，或者完成动画到最后。

Here是一个带有我的工作示例的 CodePen

这是我的代码:

SVG

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 812.73 388.23">
    <title>Asset 3 1</title>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
      <g id="aptive">
        <g>
          <path d="M224.53,209.33c-7.58,10.92-23.23,15.2-35.1,8.89-10.91-5.8-15.31-19.09-12.15-30.69A25.74,25.74,0,0,1,187,173.26a25.12,25.12,0,0,1,18.32-4A29.55,29.55,0,0,1,223,178.85c.49.55,1.41,1.34,1.57,2.07a5.13,5.13,0,0,1,0,1v27.41Zm1-54.36c-11-9-26.25-11.75-39.85-8.09A46.85,46.85,0,0,0,158,168.12a53.24,53.24,0,0,0-5.91,39,48.34,48.34,0,0,0,26,32.92c13.45,6.37,30,6.63,42.82-1.51a42.13,42.13,0,0,0,4.64-3.43v7.08c0,.59-.11.51.35.61a12.21,12.21,0,0,0,2.21,0h22.06V149c0-.31.18-1.36,0-1.62s-1.47-.09-1.84-.09H225.51Z" fill="#3cd52e"/>
          <path d="M312.21,221.15a28.45,28.45,0,0,1-19-7.27,26.91,26.91,0,0,1-3.32-3.62,2.36,2.36,0,0,1-.68-1.26,28.75,28.75,0,0,1,0-3.31V182.2a7.74,7.74,0,0,1,0-1.16,3.08,3.08,0,0,1,.89-1.39,29.68,29.68,0,0,1,7.56-6.51,28.92,28.92,0,0,1,19.84-3.76c12.31,2.28,20.08,14,20,26.06a26.83,26.83,0,0,1-5.88,16.84,24.53,24.53,0,0,1-14.76,8.48,27,27,0,0,1-4.57.38m3.94-75.83a44.26,44.26,0,0,0-28,9.65V147.9c0-.59.11-.51-.35-.61a12.22,12.22,0,0,0-2.21,0H263.56v141.8c0,.16-.1.81,0,.94s1.27.05,1.56.05h23.16c.12,0,.79.09.88,0s0-1.23,0-1.44V236.12a40.85,40.85,0,0,0,17.42,7.94,48.19,48.19,0,0,0,49-21.75,53.38,53.38,0,0,0,6.64-36.42A50.29,50.29,0,0,0,347.71,158a45.77,45.77,0,0,0-27.54-12.55q-2-.17-4-.17" fill="#3cd52e"/>
          <path d="M458.41,129.76a16.75,16.75,0,0,0,15.74-10.67A16.41,16.41,0,0,0,469,100.68a17.46,17.46,0,0,0-19.27-1.3,16.37,16.37,0,0,0-7.74,17.3,16.66,16.66,0,0,0,16.42,13.09" fill="#3cd52e"/>
          <path d="M445.61,242.82h25.61V148.67c0-.21.15-1.2,0-1.36s-2.21,0-2.59,0h-23v95.52Z" fill="#3cd52e"/>
          <path d="M552.17,147.29l-8.91,19.82-14.08,31.33L526,205.59l-4.92-10.95L510.8,171.81l-9-20L500.53,149a6.09,6.09,0,0,0-.67-1.49c-.22-.24-.27-.18-.69-.18h-26l5.07,11,11.88,25.83,13.69,29.77,10.5,22.84,2.5,5.44c.1.21.18.51.35.61a5,5,0,0,0,1.63,0h14.5c.32,0,1.22.17,1.5,0s.26-.51.34-.68l1-2.07,9-19.48,13.37-29.08,12.79-27.81L578.42,148l.34-.73H552.17Z" fill="#3cd52e"/>
          <path d="M595.9,182.75c1-7.29,6.91-13.3,13.71-15.62a19.63,19.63,0,0,1,20.88,5.13,18.31,18.31,0,0,1,4.79,10.49H595.9Zm65.59,11.42a52.57,52.57,0,0,0-8.65-29.24,44.18,44.18,0,0,0-23-17.56,46.23,46.23,0,0,0-30.63,1.13,45,45,0,0,0-21.72,18.65A54.49,54.49,0,0,0,569.9,196a51.27,51.27,0,0,0,8.48,28.27,46.33,46.33,0,0,0,21.74,17,56,56,0,0,0,31.56,2.25,53.42,53.42,0,0,0,16.72-6.68,46.15,46.15,0,0,0,7.13-5.41,42.09,42.09,0,0,0,3-3.08c.49-.56.66-.47.37-.93a15.47,15.47,0,0,0-2.24-2.24L653,221.56l-7.23-7.22-1.26-1.25c-6,6.53-14.74,10.92-23.68,11a26.13,26.13,0,0,1-21.27-10,25.36,25.36,0,0,1-4.88-12.65h64.78a4.6,4.6,0,0,0,1.15,0c.05,0,.19,0,.23,0,.35-.26.33-2.13.38-2.58a46.27,46.27,0,0,0,.23-4.7" fill="#3cd52e"/>
          <path d="M409.31,120.7H383.71v26.59H359.83v19a8.65,8.65,0,0,0,0,2.4c.12.32,0,.23.5.23H381a10.91,10.91,0,0,1,2.37,0c.42.1.19-.11.3.28a7.78,7.78,0,0,1,0,1.88v22.38c0,4.92-.12,9.87.15,14.78.49,8.84,2.41,17.72,8.4,24.53,6.18,7,15.24,10.49,24.35,11.57a68.4,68.4,0,0,0,16.75-.24c.49-.06,2.29-.06,2.55-.44.07-.1,0-.49,0-.61V221.15a47.35,47.35,0,0,1-11.31,1c-3.68-.1-7.54-.85-10.5-3.17-4.36-3.41-4.77-9.09-4.77-14.23V169h25.61c.15,0,.8.1.92,0s0-.21,0-.36a29.49,29.49,0,0,0,0-4.17V147.29H409.31V120.7Z" fill="#3cd52e"/>
        </g>
      </g>
      <rect id="perimeter" x="11" y="11" width="790.73" height="366.23" fill="none" stroke="#3cd52e" stroke-width="22"/>
    </g>
  </g>
</svg>

CSS

    #perimeter {
  stroke-dasharray: 2313.919921875;
  stroke-dashoffset: 2313.919921875;
   animation: dash 5s linear alternate infinite;
}

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

Answer 1

问题是您不能将描边对齐设置为内部对齐。

作为解决方法，您可以使用内边框矩形。 stroke-width 需要加倍。

在下面试过codepen

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 812.73 388.23">
  <title>Asset 3 1</title>
    <symbol id="inner-border-rect">
      <rect id="perimeter" x="0" y="0" width="100%" height="100%" fill="none" stroke="#3cd52e" stroke-width="44"/>
    </symbol>
    <use xlink:href="#inner-border-rect" x="11" y="11" width="790.73" height="366.23">
</svg>

另请查看:Can you control how an SVG's stroke-width is drawn?

希望对您有所帮助。