SVGアニメーション：ストローク/ボーダーが完成しません

Question

私は会社のロゴを持っています私は外側（四角形）の境界をアニメーションの出し入れにしようとしています。私は現在、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

問題は、あなたが設定されていないということですストロークアライメントをインナーに合わせる。

回避策として、内側の枠線矩形を使用することができます。ストローク幅を2倍にする必要があります。

は、以下の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?

はそれがお役に立てば幸いです。

Answer 2

この問題は、SVG viewboxプロパティとrectディメンションの間の競合に起因すると思います。

あなたはheightとwidthプロパティ

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

でSVG viewboxを交換し、RECTでxとy座標を削除した場合。

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

ストロークが上がります。

エッジを整列させるために、ストロークダッシュオフセットとストロークダッシュアレーの値も調整しました。

#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>

私はそれが完全な答えではありません知っているが、それは正しい方向にあなたを指している可能性があります。