質問

I'm trying to create my first animating SVG graphic! I have a star that I want to first get animated in any way I can before I try to get the desired animation. So I've been examining tutorials, and I thought I had my code set up properly, but when I open it in a browser, it doesn't animate. Something isn't right, and it's probably the code that Illustrator generated that's causing the issue. I tried to clean it up already though. I'm sure it's something easy to get working.

In the following code, I'm trying to animate the star from the right of screen to the left (1000 to 0). If you could help me figure that out I'd surely appreciate it!

<?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>
役に立ちましたか?

解決

This is not animating because <path> elements do not have an x attribute.

他のヒント

Try this animateColor tag , it will start animating.

<animateColor 
    attributeName="fill"
    attributeType="XML" 
    from="black" 
    to="grey"
    dur=".5s"
    repeatCount="indefinite"/>
ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top