+ 8

SVG Animation Assistance Needed

Could I get some help from somebody that feels comfortable in SVG animations? I've been trying to animate a Japanese flag to move across the width of the screen on my page, but have been having some trouble figuring it out. Here's what I have for relevant code: <svg width="800" height="200"> <rect id="flag_base" width="300" height="175" fill="white" stroke="black" stroke-width="2" /> <circle id="flag_cir" cx="150" cy="87" fill="#990033" r="60" stroke="black" stroke-width="1" /> <animate xlink:href="flag_base" attributeName="x" from="0" to="500" dur="5s" begin="2s" repeatCount="indefinite" /> <animate xlink:href="flag_cir" attributeName="cx" from="150" to="650" dur="5s" begin="2s" repeatCount="indefinite" /> </svg> I'm trying to program it to move along the x-axis, but it's not moving at all. What am I missing here? Also, I have been sorta perusing through https://css-tricks.com/guide-svg-animations-smil/ as I've been working on it, trying to understand more than what SoloLearn has on the subject, but I honestly have not read that entire (long) guide. Yet. Link to my webpage for which I'm working on this code: https://code.sololearn.com/W7Z9y7o3jV4R

22nd Sep 2017, 3:48 AM
Megan Quinn
Megan Quinn - avatar
2 Réponses
+ 6
Just add an hashtag (#) before the id name in the 'xlink:href' attribute: xlink:href="#flag_base" instead of xlink:href="flag_base" (and obviously same for the second one: xlink:href="#flag_cir") ;)
22nd Sep 2017, 4:52 AM
visph
visph - avatar
+ 5
@visph Hur dur! I can't believe I missed that. Thank you!
22nd Sep 2017, 5:30 AM
Megan Quinn
Megan Quinn - avatar