尝试对特定的SVG进行动画处理

Question

尝试对特定的SVG进行动画处理

3

我从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本身都比较陌生。说实话，我不知道自己在做什么，我试着查找一些教程，但是创建自己的点非常困难和令人困惑，我有很多从Illustrator导出的图标，但是似乎导出的内容只是fill而不是简单的点到点的线。

导出的SVG能够实现上面的动画吗？如果可以，是否有人可以帮我提供CSS代码片段，或者需要以某种方式编辑SVG，这样我就有了一个学习的基础？谢谢！

- galao

2个回答

0

如果你想让这个工作，你需要修复一些东西。

首先，为了让CSS线条动画技巧起作用，你需要将三角形形状改为使用单一描边（即两条线），而不是在外部轮廓周围绘制轮廓。请参见我在另一个问题上的答案中的解释。

其次，你有五个单独的形状。如果你想让它们按顺序动画，那么你需要计时动画。路径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>

- Paul LeBeau

嗨@Paul，我注意到你画了自己的点，难道不能使用我提供的SVG吗？ - galao

不。正如我所说，您需要重新绘制它，以便每个星点都由一个开放路径（例如两条直线）组成，而不是围绕每个星点的内部和外部走的路径。 - Paul LeBeau

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dekel · Accepted Answer

你可以在起点的每个路径上使用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>

希望这是您正在寻找的内容。