尝试使此特定svg具有动画效果

Question

我从Adobe Illustrator中导出了这个svg。

<?xml-stylesheet href="star.css" type="text/css"?>

<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"
    viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">

    <g id="star">
        <path id="star-1" class="st0" d="M37.9,27.9L49.3,5c0.3-0.6,0.8-0.6,1.1,0l11.3,22.9c0.3,0.6,1.1,0.9,1.7,0.7
            c0.7-0.2,0.9-0.8,0.6-1.5L52,2.7c-0.5-1-1.3-1.6-2.2-1.6c-0.9,0-1.7,0.6-2.2,1.6L35.9,26.6c-0.3,0.6-0.1,1.4,0.5,1.7
            C36.9,28.7,37.6,28.5,37.9,27.9z"/>

        <path id="star-2" class="st0" d="M71.3,31.8c-0.7-0.1-1.2,0.1-1.3,0.5c0,0.2-0.1,0.4-0.1,0.6c-0.2,0.7,0.1,1.2,0.7,1.3l26.2,3.8
            L77.9,56.7c-0.5,0.5-0.4,1.1,0.1,1.6c0.5,0.5,1.1,0.7,1.6,0.2l19.1-18.6c0.8-0.8,1.1-1.8,0.9-2.6c-0.3-0.9-1.1-1.4-2.2-1.6
            L71.3,31.8z"/>

        <path id="star-3" class="st0" d="M76.9,66.8c-0.1-0.7-0.8-1.2-1.4-1.1c0,0,0,0,0,0c-0.7,0.1-1.1,0.7-1,1.4l4.5,26.3L55.4,81.1
            c-0.6-0.3-1.4-0.1-1.6,0.6c0,0,0,0,0,0c-0.3,0.6,0,1.4,0.6,1.7l23.4,12.3c0.5,0.3,1,0.4,1.5,0.4c0.7,0,1.2-0.3,1.6-0.7
            c0.3-0.4,0.7-1.1,0.5-2.3L76.9,66.8z"/>

        <path id="star-4" class="st0" d="M44.7,80.9l-24,12.6l4.5-26.3c0.1-0.7-0.3-1.3-1-1.5c0,0,0,0,0,0c-0.7-0.1-1.3,0.3-1.4,1
            l-4.5,26.4c-0.2,1.2,0.2,1.9,0.5,2.3c0.7,0.8,1.9,1,3.1,0.3l23.7-12.5c0.6-0.3,1-1.1,0.7-1.7c0,0,0-0.1,0-0.1
            C46,80.7,45.3,80.5,44.7,80.9z"/>

        <path id="star-5" class="st0" d="M21.9,56.8L2.7,38.1l26.5-3.8c0.7-0.1,1.2-0.7,1-1.4c-0.2-0.6-0.8-1.1-1.5-1L2.3,35.6
            c-1.1,0.2-1.9,0.8-2.2,1.6c-0.3,0.9,0,1.8,0.9,2.6l19.4,18.9c0.5,0.5,1.2,0.4,1.7-0.1c0,0,0,0,0,0C22.5,58.1,22.4,57.3,21.9,56.8z
            "/>
    </g>

</svg>

这就是我想要完成的，它应该只是简单地从点A绘制到点B，从1开始，以5结束。

​

​

这是我的css的样子：

#star{
  fill-opacity: 0;
  stroke: #37475B;
  stroke-width: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-star 10s linear forwards;
}

@keyframes draw-star {
  to {
    stroke-dashoffset: 0;
  }
}

我对SVG动画，甚至是SVG本身都很陌生。老实说，我不知道我在做什么，我试着查找一些教程，但它相当困难和困惑创建我自己的点，我有一堆图标从插图导出，但它似乎导出它给我的东西像fill，而不是一个简单的点对点线。

导出的SVG可以做上面的动画吗？如果是这样的话，是否有人可以帮助我使用CSS片段，或者如果需要以某种方式编辑SVG，这样我就可以有一个学习的基础？谢谢!

Answer 1

您可以在start的每个路径上使用animate：

​

svg {
  width: 200px;
  padding: 5px;
}
#star{
  fill-opacity: 0;
  stroke: #37475B;
  stroke-width: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

<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"
    viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">

    <g id="star">
        <path id="star-1" class="st0" d="M37.9,27.9L49.3,5c0.3-0.6,0.8-0.6,1.1,0l11.3,22.9c0.3,0.6,1.1,0.9,1.7,0.7
            c0.7-0.2,0.9-0.8,0.6-1.5L52,2.7c-0.5-1-1.3-1.6-2.2-1.6c-0.9,0-1.7,0.6-2.2,1.6L35.9,26.6c-0.3,0.6-0.1,1.4,0.5,1.7
            C36.9,28.7,37.6,28.5,37.9,27.9z"/>

        <path id="star-2" class="st0" d="M71.3,31.8c-0.7-0.1-1.2,0.1-1.3,0.5c0,0.2-0.1,0.4-0.1,0.6c-0.2,0.7,0.1,1.2,0.7,1.3l26.2,3.8
            L77.9,56.7c-0.5,0.5-0.4,1.1,0.1,1.6c0.5,0.5,1.1,0.7,1.6,0.2l19.1-18.6c0.8-0.8,1.1-1.8,0.9-2.6c-0.3-0.9-1.1-1.4-2.2-1.6
            L71.3,31.8z"/>

        <path id="star-3" class="st0" d="M76.9,66.8c-0.1-0.7-0.8-1.2-1.4-1.1c0,0,0,0,0,0c-0.7,0.1-1.1,0.7-1,1.4l4.5,26.3L55.4,81.1
            c-0.6-0.3-1.4-0.1-1.6,0.6c0,0,0,0,0,0c-0.3,0.6,0,1.4,0.6,1.7l23.4,12.3c0.5,0.3,1,0.4,1.5,0.4c0.7,0,1.2-0.3,1.6-0.7
            c0.3-0.4,0.7-1.1,0.5-2.3L76.9,66.8z"/>

        <path id="star-4" class="st0" d="M44.7,80.9l-24,12.6l4.5-26.3c0.1-0.7-0.3-1.3-1-1.5c0,0,0,0,0,0c-0.7-0.1-1.3,0.3-1.4,1
            l-4.5,26.4c-0.2,1.2,0.2,1.9,0.5,2.3c0.7,0.8,1.9,1,3.1,0.3l23.7-12.5c0.6-0.3,1-1.1,0.7-1.7c0,0,0-0.1,0-0.1
            C46,80.7,45.3,80.5,44.7,80.9z"/>

        <path id="star-5" class="st0" d="M21.9,56.8L2.7,38.1l26.5-3.8c0.7-0.1,1.2-0.7,1-1.4c-0.2-0.6-0.8-1.1-1.5-1L2.3,35.6
            c-1.1,0.2-1.9,0.8-2.2,1.6c-0.3,0.9,0,1.8,0.9,2.6l19.4,18.9c0.5,0.5,1.2,0.4,1.7-0.1c0,0,0,0,0,0C22.5,58.1,22.4,57.3,21.9,56.8z
            "/>
    </g>
    <animate xlink:href="#star-1" attributeName="stroke-dashoffset" from="1000" to="0"  dur="10s" fill="freeze" d="star-1-anim" />
    <animate xlink:href="#star-2" attributeName="stroke-dashoffset" from="1000" to="0"  dur="10s" fill="freeze" d="star-2-anim" begin="+1.5s"/>
    <animate xlink:href="#star-3" attributeName="stroke-dashoffset" from="1000" to="0"  dur="10s" fill="freeze" d="star-3-anim" begin="+3s"/>
    <animate xlink:href="#star-4" attributeName="stroke-dashoffset" from="1000" to="0"  dur="10s" fill="freeze" d="star-4-anim" begin="+4.5s"/>
    <animate xlink:href="#star-5" attributeName="stroke-dashoffset" from="1000" to="0"  dur="10s" fill="freeze" d="star-5-anim" begin="+6s"/>
</svg>

​

希望这就是你要找的。

Answer 2

如果你想让它正常工作，你必须修复一些东西。

首先，为了让CSS线条动画特技发挥作用，你需要改变你的三角形形状，以使用单一的笔画(即…两行)，而不是围绕外部的轮廓。有关这一点的解释，请参阅my answer on this other question。

其次，你有五个不同的形状。如果希望它们一个接一个地按顺序设置动画，则必须对动画进行计时。路径2-5的动画需要应用延迟。您可以使用animation-delay规则来做到这一点。

演示

​

#star path {
  fill: none;
  stroke: #37475B;
  stroke-width: 1;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  animation-name: draw-star;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes draw-star {
  to {
    stroke-dashoffset: 0;
  }
}

#star-2 {
  animation-delay: 2s;
}

#star-3 {
  animation-delay: 4s;
}

#star-4 {
  animation-delay: 6s;
}

<svg width="300px" height="300px">
  <g id="star">
    <path id="star-1" d="M 100,90 L150,10 L 200,90" />
    <path id="star-2" d="M 210,100 L 290,150 L 210,200" />
    <path id="star-3" d="M 200,210 L150,290 L 100,210" />
    <path id="star-4" d="M 90,200 L 10,150 L 90,100" />
  </g>

</svg>

​