我有一个带有渐变的条形图，我正试图制作动画，就像从不同的颜色到不同的颜色，从左侧到右侧。最终结果应该冻结渐变颜色。
如何使用SMIL进行操作？
我能用css动画实现这个吗？
here's the code and a non working fiddle example:
<svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 744.094 871.654">
<g
<defs>
<linearGradient id="myGrad" >
/* Are my offset correct? or should it rise from 0 to 100? */
<stop offset="25%" stop-color="yellow" />
<stop offset="25%" stopColor="green" />
<stop offset="25%" stopColor="blue" />
<stop offset="25%" stopColor="blue" />
<stop offset="25%" stopColor="red" />
<animate
attributeName="stop-color"
/* What should I animate here and how? */
dur="4s" />
</linearGradient>
</defs>
<path d="M740.096 599.704c-.027-8.88-7.245-16.055-16.123-16.028-8.88.03-16.055 7.248-16.028 16.127.014 4.4 1.8 8.377 4.668 11.272-8.59 28.308-21.002 55.294-37.011 80.391A328.59 328.59 0 0 1 635.908 742l-.266-.25a363.91 363.91 0 0 1-26.633 25.27 16.081 16.081 0 0 0-6.03-1.157c-8.877.027-16.054 7.246-16.025 16.125.002.803.08 1.583.198 2.35a347.143 347.143 0 0 1-6.908 4.942c-32.778 22.805-68.54 39.69-106.458 50.321a16.04 16.04 0 0 0-11.487-4.781c-7.366.022-13.545 5.004-15.425 11.768a382.23 382.23 0 0 1-64.675 5.518c-.74 0-1.483 0-2.226-.01a381.546 381.546 0 0 1-97.874-13.344c-1.671-7.411-8.299-12.947-16.216-12.925a16.533 16.533 0 0 0-10.72 3.992 387.615 387.615 0 0 1-55.212-25.694 387.43 387.43 0 0 1-70.985-51.554c.345-1.34.548-2.741.545-4.197-.031-9.154-7.475-16.551-16.63-16.527a16.874 16.874 0 0 0-3.306.344 347.345 347.345 0 0 1-35.2-46.19 346.111 346.111 0 0 1-37.443-79.483 16.52 16.52 0 0 0 4.7-11.606c-.03-9.154-7.473-16.554-16.629-16.527-9.157.028-16.556 7.476-16.527 16.63.024 7.932 5.62 14.537 13.065 16.146a362.193 362.193 0 0 0 39.28 83.476 363.588 363.588 0 0 0 36.575 48.045 16.476 16.476 0 0 0-1.042 5.794c.025 9.154 7.47 16.556 16.626 16.528a16.46 16.46 0 0 0 4.932-.76 403.53 403.53 0 0 0 74.128 53.867 403.134 403.134 0 0 0 57.52 26.77c1.203 8 8.095 14.133 16.424 14.109a16.53 16.53 0 0 0 11.606-4.8 397.583 397.583 0 0 0 14.54 3.959l.07-.279a397.86 397.86 0 0 0 87.68 10.298c.775.01 1.545.01 2.32.01a398.45 398.45 0 0 0 68.72-5.99 16.018 16.018 0 0 0 11.481 4.782c6.838-.024 12.648-4.317 14.953-10.342.514-.127 1.031-.243 1.545-.373l-.327-1.3c39.487-11.13 76.72-28.736 110.85-52.484a361.937 361.937 0 0 0 7.78-5.563 16.115 16.115 0 0 0 5.876 1.107c8.88-.032 16.055-7.25 16.026-16.13 0-.72-.068-1.424-.162-2.118 27.448-22.866 51.049-49.615 70.208-79.658a340.632 340.632 0 0 0 38.989-84.832c6.898-1.825 11.982-8.104 11.957-15.574"
fill="url(#myGrad)" />
</g>
</svg>
感谢评论更新了提琴手 SEE HERE
答案 0 :(得分：0)
我不确定你想让动画看起来像什么，但是这是用SMIL做的一种方法...
请注意，您的一些停止颜色属性无效，因为您已经使用驼峰编写了这些属性。我也在下面纠正了这一点。
<svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 550 744.094 871.654">
<g>
<defs>
<linearGradient id="myGrad" >
<stop offset="0%" stop-color="yellow"/>
<stop offset="0%" stop-color="green">
<animate
attributeName="offset"
to="25%"
dur="4s" fill="freeze"/>
</stop>
<stop offset="0%" stop-color="blue">
<animate
attributeName="offset"
to="50%"
dur="4s" fill="freeze"/>
</stop>
<stop offset="0%" stop-color="blue">
<animate
attributeName="offset"
to="75%"
dur="4s" fill="freeze"/>
</stop>
<stop offset="0%" stop-color="red">
<animate
attributeName="offset"
to="100%"
dur="4s" fill="freeze"/>
</stop>
</linearGradient>
</defs>
<path d="M740.096 599.704c-.027-8.88-7.245-16.055-16.123-16.028-8.88.03-16.055 7.248-16.028 16.127.014 4.4 1.8 8.377 4.668 11.272-8.59 28.308-21.002 55.294-37.011 80.391A328.59 328.59 0 0 1 635.908 742l-.266-.25a363.91 363.91 0 0 1-26.633 25.27 16.081 16.081 0 0 0-6.03-1.157c-8.877.027-16.054 7.246-16.025 16.125.002.803.08 1.583.198 2.35a347.143 347.143 0 0 1-6.908 4.942c-32.778 22.805-68.54 39.69-106.458 50.321a16.04 16.04 0 0 0-11.487-4.781c-7.366.022-13.545 5.004-15.425 11.768a382.23 382.23 0 0 1-64.675 5.518c-.74 0-1.483 0-2.226-.01a381.546 381.546 0 0 1-97.874-13.344c-1.671-7.411-8.299-12.947-16.216-12.925a16.533 16.533 0 0 0-10.72 3.992 387.615 387.615 0 0 1-55.212-25.694 387.43 387.43 0 0 1-70.985-51.554c.345-1.34.548-2.741.545-4.197-.031-9.154-7.475-16.551-16.63-16.527a16.874 16.874 0 0 0-3.306.344 347.345 347.345 0 0 1-35.2-46.19 346.111 346.111 0 0 1-37.443-79.483 16.52 16.52 0 0 0 4.7-11.606c-.03-9.154-7.473-16.554-16.629-16.527-9.157.028-16.556 7.476-16.527 16.63.024 7.932 5.62 14.537 13.065 16.146a362.193 362.193 0 0 0 39.28 83.476 363.588 363.588 0 0 0 36.575 48.045 16.476 16.476 0 0 0-1.042 5.794c.025 9.154 7.47 16.556 16.626 16.528a16.46 16.46 0 0 0 4.932-.76 403.53 403.53 0 0 0 74.128 53.867 403.134 403.134 0 0 0 57.52 26.77c1.203 8 8.095 14.133 16.424 14.109a16.53 16.53 0 0 0 11.606-4.8 397.583 397.583 0 0 0 14.54 3.959l.07-.279a397.86 397.86 0 0 0 87.68 10.298c.775.01 1.545.01 2.32.01a398.45 398.45 0 0 0 68.72-5.99 16.018 16.018 0 0 0 11.481 4.782c6.838-.024 12.648-4.317 14.953-10.342.514-.127 1.031-.243 1.545-.373l-.327-1.3c39.487-11.13 76.72-28.736 110.85-52.484a361.937 361.937 0 0 0 7.78-5.563 16.115 16.115 0 0 0 5.876 1.107c8.88-.032 16.055-7.25 16.026-16.13 0-.72-.068-1.424-.162-2.118 27.448-22.866 51.049-49.615 70.208-79.658a340.632 340.632 0 0 0 38.989-84.832c6.898-1.825 11.982-8.104 11.957-15.574"
fill="url(#myGrad)" />
</g>
</svg>
看起来Chrome有一个错误，它不会为百分比的偏移设置动画。这是一个解决方法...
<svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 550 744.094 871.654">
<g>
<defs>
<linearGradient id="myGrad" >
<stop offset="0%" stop-color="yellow"/>
<stop offset="0" stop-color="green">
<animate
attributeName="offset"
to=".25"
dur="4s" fill="freeze"/>
</stop>
<stop offset="0" stop-color="blue">
<animate
attributeName="offset"
to=".5"
dur="4s" fill="freeze"/>
</stop>
<stop offset="0" stop-color="blue">
<animate
attributeName="offset"
to=".75"
dur="4s" fill="freeze"/>
</stop>
<stop offset="0" stop-color="red">
<animate
attributeName="offset"
to="1"
dur="4s" fill="freeze"/>
</stop>
</linearGradient>
</defs>
<path d="M740.096 599.704c-.027-8.88-7.245-16.055-16.123-16.028-8.88.03-16.055 7.248-16.028 16.127.014 4.4 1.8 8.377 4.668 11.272-8.59 28.308-21.002 55.294-37.011 80.391A328.59 328.59 0 0 1 635.908 742l-.266-.25a363.91 363.91 0 0 1-26.633 25.27 16.081 16.081 0 0 0-6.03-1.157c-8.877.027-16.054 7.246-16.025 16.125.002.803.08 1.583.198 2.35a347.143 347.143 0 0 1-6.908 4.942c-32.778 22.805-68.54 39.69-106.458 50.321a16.04 16.04 0 0 0-11.487-4.781c-7.366.022-13.545 5.004-15.425 11.768a382.23 382.23 0 0 1-64.675 5.518c-.74 0-1.483 0-2.226-.01a381.546 381.546 0 0 1-97.874-13.344c-1.671-7.411-8.299-12.947-16.216-12.925a16.533 16.533 0 0 0-10.72 3.992 387.615 387.615 0 0 1-55.212-25.694 387.43 387.43 0 0 1-70.985-51.554c.345-1.34.548-2.741.545-4.197-.031-9.154-7.475-16.551-16.63-16.527a16.874 16.874 0 0 0-3.306.344 347.345 347.345 0 0 1-35.2-46.19 346.111 346.111 0 0 1-37.443-79.483 16.52 16.52 0 0 0 4.7-11.606c-.03-9.154-7.473-16.554-16.629-16.527-9.157.028-16.556 7.476-16.527 16.63.024 7.932 5.62 14.537 13.065 16.146a362.193 362.193 0 0 0 39.28 83.476 363.588 363.588 0 0 0 36.575 48.045 16.476 16.476 0 0 0-1.042 5.794c.025 9.154 7.47 16.556 16.626 16.528a16.46 16.46 0 0 0 4.932-.76 403.53 403.53 0 0 0 74.128 53.867 403.134 403.134 0 0 0 57.52 26.77c1.203 8 8.095 14.133 16.424 14.109a16.53 16.53 0 0 0 11.606-4.8 397.583 397.583 0 0 0 14.54 3.959l.07-.279a397.86 397.86 0 0 0 87.68 10.298c.775.01 1.545.01 2.32.01a398.45 398.45 0 0 0 68.72-5.99 16.018 16.018 0 0 0 11.481 4.782c6.838-.024 12.648-4.317 14.953-10.342.514-.127 1.031-.243 1.545-.373l-.327-1.3c39.487-11.13 76.72-28.736 110.85-52.484a361.937 361.937 0 0 0 7.78-5.563 16.115 16.115 0 0 0 5.876 1.107c8.88-.032 16.055-7.25 16.026-16.13 0-.72-.068-1.424-.162-2.118 27.448-22.866 51.049-49.615 70.208-79.658a340.632 340.632 0 0 0 38.989-84.832c6.898-1.825 11.982-8.104 11.957-15.574"
fill="url(#myGrad)" />
</g>
</svg>
答案 1 :(得分：0)
也许你想要这样的东西：
<svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 550 744.094 871.654">
<defs>
<linearGradient id="myGrad" >
<stop offset="0" stop-color="yellow">
<animate attributeName="offset" values="0" dur="2s" fill="freeze" />
</stop>
<stop offset="0" stop-color="green" >
<animate attributeName="offset" values="0;.2" dur="2s" fill="freeze" />
</stop>
<stop offset="0" stop-color="blue" >
<animate attributeName="offset" values="0;.5" dur="2s" fill="freeze" />
</stop>
<stop offset="0" stop-color="red" >
<animate attributeName="offset" values="0;1" dur="2s" fill="freeze" />
</stop>
<stop offset="1" stop-color="transparent" />
<animate />
</linearGradient>
</defs>
<path d="M740.096 599.704c-.027-8.88-7.245-16.055-16.123-16.028-8.88.03-16.055 7.248-16.028 16.127.014 4.4 1.8 8.377 4.668 11.272-8.59 28.308-21.002 55.294-37.011 80.391A328.59 328.59 0 0 1 635.908 742l-.266-.25a363.91 363.91 0 0 1-26.633 25.27 16.081 16.081 0 0 0-6.03-1.157c-8.877.027-16.054 7.246-16.025 16.125.002.803.08 1.583.198 2.35a347.143 347.143 0 0 1-6.908 4.942c-32.778 22.805-68.54 39.69-106.458 50.321a16.04 16.04 0 0 0-11.487-4.781c-7.366.022-13.545 5.004-15.425 11.768a382.23 382.23 0 0 1-64.675 5.518c-.74 0-1.483 0-2.226-.01a381.546 381.546 0 0 1-97.874-13.344c-1.671-7.411-8.299-12.947-16.216-12.925a16.533 16.533 0 0 0-10.72 3.992 387.615 387.615 0 0 1-55.212-25.694 387.43 387.43 0 0 1-70.985-51.554c.345-1.34.548-2.741.545-4.197-.031-9.154-7.475-16.551-16.63-16.527a16.874 16.874 0 0 0-3.306.344 347.345 347.345 0 0 1-35.2-46.19 346.111 346.111 0 0 1-37.443-79.483 16.52 16.52 0 0 0 4.7-11.606c-.03-9.154-7.473-16.554-16.629-16.527-9.157.028-16.556 7.476-16.527 16.63.024 7.932 5.62 14.537 13.065 16.146a362.193 362.193 0 0 0 39.28 83.476 363.588 363.588 0 0 0 36.575 48.045 16.476 16.476 0 0 0-1.042 5.794c.025 9.154 7.47 16.556 16.626 16.528a16.46 16.46 0 0 0 4.932-.76 403.53 403.53 0 0 0 74.128 53.867 403.134 403.134 0 0 0 57.52 26.77c1.203 8 8.095 14.133 16.424 14.109a16.53 16.53 0 0 0 11.606-4.8 397.583 397.583 0 0 0 14.54 3.959l.07-.279a397.86 397.86 0 0 0 87.68 10.298c.775.01 1.545.01 2.32.01a398.45 398.45 0 0 0 68.72-5.99 16.018 16.018 0 0 0 11.481 4.782c6.838-.024 12.648-4.317 14.953-10.342.514-.127 1.031-.243 1.545-.373l-.327-1.3c39.487-11.13 76.72-28.736 110.85-52.484a361.937 361.937 0 0 0 7.78-5.563 16.115 16.115 0 0 0 5.876 1.107c8.88-.032 16.055-7.25 16.026-16.13 0-.72-.068-1.424-.162-2.118 27.448-22.866 51.049-49.615 70.208-79.658a340.632 340.632 0 0 0 38.989-84.832c6.898-1.825 11.982-8.104 11.957-15.574"
fill="url(#myGrad)" />
</svg>