html - 我想为这个标志制作动画，但由于某种原因它不起作用

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