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本身都很陌生。说实话，我不知道我在做什么，我试着寻找一些教程，但它很难和创造我自己的点令人困惑，我有一堆从Illustrator出口的图标，但似乎出口它给了我一些像fill不是一个简单的指向点线。

导出的SVG是否可以执行上面的动画？如果是这样，任何人都可以帮助我使用CSS片段，或者如果需要以某种方式编辑SVG，那么我可以有一个基础来学习吗？谢谢！

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望它能满足您的需求。

Answer 2

如果你想让它发挥作用，你将不得不修复一些事情。

首先，要使CSS线条动画技巧起作用，您需要更改三角形形状以使用单个笔划（即两条线）而不是外围的轮廓。有关详细说明，请参阅my answer on this other question。

其次，你有五种不同的形状。如果你想让它们按顺序依次动画，那么你将不得不为动画定时。路径2-5的动画需要应用延迟。您可以使用Locale locale = new Locale("ar"); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-d"); Date date3 = null; try { date3 = sdf.parse(date); } catch (Exception e) { } sdf = new SimpleDateFormat("EEEE, MMMM yyyy",locale); String format = sdf.format(date3); System.out.print("Result: " + format); Log.wtf("result",format); holder.date.setText(format); //holder.date.setText(date);规则执行此操作。

<强>演示

ImageBrush b =  (ImageBrush)PaintCanvas.Background;
BitmapSource src = (BitmapSource)b.ImageSource;

string path = @"g:\myimg-name.jpg";
using (FileStream fs1 = new FileStream(path, FileMode.OpenOrCreate))
{
    BitmapFrame frame = BitmapFrame.Create(src);

    JpegBitmapEncoder enc = new JpegBitmapEncoder();
    enc.Frames.Add(frame);
    enc.Save(fs1);
}

animation-delay

试图为这个特定的svg制作动画

2 个答案: