SVG Animation: Stroke/Border not complete

Question

I have a company logo I'm trying to make the outside (square) border animate in and out. I'm currently using the dasharray and dashoffset properties to help me to do. Here is an article that explains it.

I have it working, however the border doesn't seem to start at the very beginning, or complete the animation to the very end.

Here is a CodePen with my working example

Here is my code:

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;
  }
}

score 0 · Accepted Answer · edited May 23 '17 at 12:00

The problem is that you can't set the stroke-alignment to inner.

As a workaround you could go with inner bordered rectangle. Stroke-width needs to be doubled.

Tried it in the following 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>

Also have a look at that: Can you control how an SVG's stroke-width is drawn?

Hope it helps.

score 0 · Answer 2 · answered Mar 02 '17 at 17:07

I think the problem stems from a conflict between SVG viewbox property and rect dimensions.

If you replace SVG viewbox with height and width properties

<svg xmlns="http://www.w3.org/2000/svg" width="801.73" height="366.23">

and remove the x and y coordinates in rect.

<rect id="perimeter" width="801.73" height="366.23" fill="none" stroke="#3cd52e" stroke-width="22"/>

You get a stroke that lines up.

I also tweaked stroke-dashoffset and stroke-dasharray values to ensure the edges lined up.

#perimeter {
  stroke-dasharray: 2333.919921875;
  stroke-dashoffset: 2333.919921875;
}

codepen

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

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

<div class="logo">
  <svg xmlns="http://www.w3.org/2000/svg" width="801.73" height="366.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" width="801.73" height="366.23" fill="none" stroke="#3cd52e" stroke-width="22"/>
    </g>
  </g>
</svg>
</div>

I know it's not a complete answer, but it might point you in the right direction.

Thanks for the direction! between your answer and @isaacT I was able to figure it out — ghall, Mar 02 '17 at 19:26

SVG Animation: Stroke/Border not complete

2 Answers2