このロゴをアニメーション化したいが何らかの理由で動作しない

Question

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve"> 
    <defs> 
     <style> 
     .path { 
      stroke-dasharray: 1000; 
      stroke-dashoffset: 1000; 
      animation: dash 5s linear alternate infinite; 
     } 

     @keyframes dash { 
      from { 
       stroke-dashoffset: 1000; 
      } 
      to { 
       stroke-dashoffset: 0; 
      } 
     } 
     </style> 
    </defs> 
    <title>logo</title> 
    <path class="path" d="M115.59,123.26l39.56-31c0.63-.5-0.26-1.38-0.88-0.88l-39.56,31c-0.63.5,0.26,1.38,0.88,0.88h0Z" transform="translate(-93.82 -21.1)" /> 
    <path class="path" d="M94.71,73.09l35.54-.51a0.63,0.63,0,0,0,0-1.25l-35.54.51a0.63,0.63,0,0,0,0,1.25h0Z" transform="translate(-93.82 -21.1)" /> 
    <path class="path" d="M95.1,121.61l0-86.41V22.81a0.63,0.63,0,0,0-1.25,0l0,86.41v12.39a0.63,0.63,0,0,0,1.25,0h0Z" transform="translate(-93.82 -21.1)" /> 
    <path class="path" d="M155.15,91.35l-15.9-19.21c-0.51-.62-1.39.27-0.88,0.88l15.9,19.21c0.51,0.62,1.39-.27.88-0.88h0Z" transform="translate(-93.82 -21.1)" /> 
    <path class="path" d="M154.57,52.56L138.36,72.14c-0.51.62,0.37,1.5,0.88,0.88l16.21-19.58c0.51-.62-0.37-1.5-0.88-0.88h0Z" transform="translate(-93.82 -21.1)" /> 
    <path class="path" d="M114.71,22.13l39.56,31c0.63,0.49,1.52-.39.88-0.88l-39.56-31c-0.63-.49-1.52.39-0.88,0.88h0Z" transform="translate(-93.82 -21.1)" /> 
</svg> 

私はこのsvgロゴをCSSアニメーションで描いたようにしたい。誰かが私にこの問題を解決するのを助けることができますそのページ上にすでにアニメーション化されていません

Answer 1

現在、あなたのsvgにはストロークがありません（実際には塗りつぶしが表示されます）。塗りを削除してストロークを追加すると、アニメーションが始まります：

.path { 
    stroke: black; 
    fill: none; 

    stroke-dasharray: 1000; 
    stroke-dashoffset: 1000; 
    animation: dash 5s linear alternate infinite; 
}