Question

我正在尝试创建我的第一个动画SVG图形！在我尝试获得所需的动画之前，我想要以任何方式首先获得动画效果。所以我一直在检查教程，我认为我的代码设置正确，但是当我在浏览器中打开它时，它没有动画。有些事情是不对的，而且可能是Illustrator生成的导致问题的代码。我试过清理它了。我确信它很容易上班。

在下面的代码中，我试图将屏幕右侧的星形设置为左侧（1000到0）。如果你能帮我解决这个问题，我一定很感激！

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<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"
     height="193" width="182.67" viewBox="0 0 193 182.67" enable-background="new 0 0 193 182.67" xml:space="preserve">

<path x="0" y="100" stroke="goldenrod" stroke-width="3" fill="gold" fill-rule="evenodd" clip-rule="evenodd" d="M155.97,182.35c-6.51-1.77-11.74-5.54-17.37-8.4
            c-13.17-6.7-26.14-13.79-39.17-20.76c-1.61-0.86-3.28-1.05-4.77-0.19c-13.24,7.61-27.21,13.84-40.54,21.28
            c-3.56,1.98-7.05,4.1-10.71,5.88c-4.06,1.98-6.25,0.61-4.9-3.53c1.98-6.1,1.49-12.46,3.14-18.59c1.21-4.5,1.7-9.31,2.47-13.99
            c1.1-6.69,2.03-13.39,3.66-19.99c1.1-4.45,0.71-8.19-3.33-11.91C31.24,99.98,18.18,87.63,5.51,74.88
            c-1.61-1.62-2.88-3.51-4.62-5.04C1.82,68.4,3.35,69.08,4.5,69c9.23-0.58,18.21-2.84,27.34-3.84c6.58-0.72,12.96-2.74,19.68-2.61
            c4.47,0.09,8.68-2.01,13.27-2.03c2.68-0.01,3.74-2.98,4.68-5.18c2.5-5.84,5.53-11.38,8.64-16.91c5.32-9.44,8.74-19.82,14.13-29.24
            C93.78,6.5,95.26,3.78,97,0.64c3.18,4.47,4.81,9.38,7.11,13.89c6.86,13.42,13.52,26.93,20.16,40.46c1.92,3.91,4.54,5.53,9.13,6.08
            c6.34,0.76,12.73,1.67,19.05,2.99c5.63,1.17,11.45,1.86,17.21,2.49c6.85,0.75,13.54,2.74,20.54,2.46c2.28-0.09,2.7,1.23,0.84,3.13
            c-3.56,3.64-7.36,7.04-11.07,10.53c-10.97,10.3-21.53,21.02-32.17,31.67c-1.94,1.94-2.43,3.65-2.11,6.49
            c1.21,10.7,4.27,21.07,5.09,31.87c0.59,7.77,2.86,15.43,4.62,23.08C155.88,177.93,156.1,179.96,155.97,182.35z" >
<animate
        attributeName = "x"
        from          = "1000"
        to            = "0"
        begin         = "0s"
        dur           = "0.5s"
        id            = "swipe"
    />
</path>
</svg>

Answer 1

这不是动画，因为<path>元素没有x属性。

Answer 2

试试这个animateColor标签，它会开始制作动画。

<animateColor 
    attributeName="fill"
    attributeType="XML" 
    from="black" 
    to="grey"
    dur=".5s"
    repeatCount="indefinite"/>

带有动画标签的SVG图形不是动画

2 个答案: