jQuery的SVG转变彩动画 [英] jquery svg shift color animation
本文介绍了jQuery的SVG转变彩动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图使一个SVG动画，其中SVG幻灯片的颜色的其他颜色。我的目标是让一种运行光。
我并不想淡出整个SVG的填充颜色为大量的实例可见。
结果，下面是一个例子的照片与动画的几帧。 SVG动画结果
我已经尝试了一些不同的工艺，但无法找到一个好。结果
这是我用CSS关键帧做的：
$ .keyframe.define（[{
名称：'转移'，
0％：{背景位置：0像素}，
2％：{背景位置：6个像素}，
4％：{背景位置'：'12px的}，
6％：{背景位置'：'18像素}，
8％：{背景位置'：'24px的}，
'10％'：{'背景位置'：'30PX}，
'12％'：{'背景位置'：'36px'}，
'14％'：{'背景位置'：'42PX}，
'16％'：{'背景位置'：'48像素的}，
'18％'：{'背景位置'：'54px'}，
'20％'：{'背景位置'：'60像素}，
'22％'：{'背景位置'：'66px'}，
'24％'：{'背景位置'：'72px'}，
'26％'：{'背景位置'：'78px'}，
'28％'：{'背景位置'：'84px'}，
'30％'：{'背景位置'：'90像素}，
'32％'：{'背景位置'：'96PX}，
'34％'：{'背景位置'：'102px}，
'36％'：{'背景位置'：'108px}，
'38％'：{'背景位置'：'114px}，
'40％'：{'背景位置'：'120像素}，
'42％'：{'背景位置'：'126px}，
'44％'：{'背景位置'：'132px}，
'46％'：{'背景位置'：'138px}，
'48％'：{'背景位置'：'144px}，
'50％'：{'背景位置'：'为150px}，
'52％'：{'背景位置'：'156px}，
'54％'：{'背景位置'：'162px}，
'56％'：{'背景位置'：'168px}，
'58％'：{'背景位置'：'174px}，
'60％'：{'背景位置'：'180像素}，
'62％'：{'背景位置'：'186px}，
'64％'：{'背景位置'：'192px}，
'66％'：{'背景位置'：'198px}，
'68％'：{'背景位置'：'204px}，
'70％'：{'背景位置'：'210px}，
'72％'：{'背景位置'：'216px}，
'74％'：{'背景位置'：'222px}，
'76％'：{'背景位置'：'228px}，
'78％'：{'背景位置'：'234px}，
'80％'：{'背景位置'：'240像素}，
'82％'：{'背景位置'：'246px}，
'84％'：{'背景位置'：'252px}，
'86％'：{'背景位置'：'258px}，
'88％'：{'背景位置'：'264px}，
'90％'：{'背景位置'：'270px}，
'92％'：{'背景位置'：'276px}，
'94％'：{'背景位置'：'282px}，
'96％'：{'背景位置'：'288px}，
'98％'：{'背景位置'：'294px}，
100％：{背景位置'：'300像素'} }]）;
$（'。ledbar'）。playKeyframe（{
名称：'转移'，
持续时间：4S
timingFunction：线性，
延迟：0，
方向：反向，
在fillMode：前锋， }）;
在青橙衣军团的部分举措。 SVG的绘制，使每个矩形只是6个像素进一步其中一个比另一个。
这并没有becouse两个关键帧之间的平滑过渡工作。这使得动画闪烁。也许，如果动画是步骤，将工作，但我不知道这是如何工作和我的事情，必须有一个更好的办法。
所以我不知道我怎么会liniear转移SVG的颜色到其他的颜色。我看着SVG口罩等，但不能figuer出来。
这是SVG文件，也许它有用：
＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT; - 发电机：Adobe Illustrator中16.0.0，SVG导出插件。 SVG版本：6.00构建0） - ＆GT;
！＆LT; DOCTYPE SVG PUBLIC - // W3C // DTD SVG 1.1 // ENhttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">
＆LT; SVG版本=1.1ID =Layer_1的xmlns =http://www.w3.org/2000/svg的xmlns：XLink的=http://www.w3.org/1999/xlink× =0像素Y =0像素
宽度=403.5px高度=13px的视框=0 0 403.5 13使背景=新0 0 403.5 13的xml：空间=preserve＆GT;
＆LT克ID =Button_2 _-_绿色＆GT;
＆所述; / g取代;
＆所述g取代;
＆LT;路径填充=＃80A993D =M0.017,0L1.5,0.002L1.484,13H0L0.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M6.017,0L7.5,0.002L7.484,13H6L6.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M12.017,0L13.5,0.002L13.484,13H12L12.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M18.017,0L19.5,0.002L19.484,13H18L18.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M36.017,0L37.5,0.002L37.484,13H36L36.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M42.017,0L43.5,0.002L43.484,13H42L42.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M24.017,0L25.5,0.002L25.484,13H24L24.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M30.017,0L31.5,0.002L31.484,13H30L30.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M48.017,0L49.5,0.002L49.484,13H48L48.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M54.017,0L55.5,0.002L55.484,13H54L54.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M60.017,0L61.5,0.002L61.484,13H60L60.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M66.017,0L67.5,0.002L67.484,13H66L66.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M72.017,0L73.5,0.002L73.484,13H72L72.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M78.017,0L79.5,0.002L79.484,13H78L78.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M84.017,0L85.5,0.002L85.484,13H84L84.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M90.017,0L91.5,0.002L91.484,13H90L90.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M96.017,0L97.5,0.002L97.484,13H96L96.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M102.017,0l1.483,0.002L103.484,13H102L102.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M108.017,0l1.483,0.002L109.484,13H108L108.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M114.017,0l1.483,0.002L115.484,13H114L114.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M120.017,0l1.483,0.002L121.484,13H120L120.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M126.017,0l1.483,0.002L127.484,13H126L126.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M144.017,0l1.483,0.002L145.484,13H144L144.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M150.017,0l1.483,0.002L151.484,13H150L150.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M132.017,0l1.483,0.002L133.484,13H132L132.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M138.017,0l1.483,0.002L139.484,13H138L138.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M156.017,0l1.483,0.002L157.484,13H156L156.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M162.017,0l1.483,0.002L163.484,13H162L162.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M168.017,0l1.483,0.002L169.484,13H168L168.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M174.017,0l1.483,0.002L175.484,13H174L174.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M180.017,0l1.483,0.002L181.484,13H180L180.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M186.017,0l1.483,0.002L187.484,13H186L186.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M192.017,0l1.483,0.002L193.484,13H192L192.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M198.017,0l1.483,0.002L199.484,13H198L198.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M204.017,0l1.483,0.002L205.484,13H204L204.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M210.017,0l1.483,0.002L211.484,13H210L210.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M216.017,0l1.483,0.002L217.484,13H216L216.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M222.017,0l1.483,0.002L223.484,13H222L222.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M228.017,0l1.483,0.002L229.484,13H228L228.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M234.017,0l1.483,0.002L235.484,13H234L234.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M252.017,0l1.483,0.002L253.484,13H252L252.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M258.017,0l1.483,0.002L259.484,13H258L258.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M240.017,0l1.483,0.002L241.484,13H240L240.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M246.017,0l1.483,0.002L247.484,13H246L246.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M264.017,0l1.483,0.002L265.484,13H264L264.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M270.017,0l1.483,0.002L271.484,13H270L270.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M276.017,0l1.482,0.002L277.484,13H276L276.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M282.017,0l1.482,0.002L283.484,13H282L282.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M288.017,0l1.482,0.002L289.484,13H288L288.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M294.017,0l1.482,0.002L295.484,13H294L294.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M300.017,0l1.482,0.002L301.484,13H300L300.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M306.017,0l1.482,0.002L307.484,13H306L306.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M312.017,0l1.482,0.002L313.484,13H312L312.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M318.017,0l1.482,0.002L319.484,13H318L318.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M324.017,0l1.482,0.002L325.484,13H324L324.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M330.017,0l1.482,0.002L331.484,13H330L330.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M336.017,0l1.482,0.002L337.484,13H336L336.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M342.017,0l1.482,0.002L343.484,13H342L342.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M360.017,0l1.482,0.002L361.484,13H360L360.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M366.017,0l1.482,0.002L367.484,13H366L366.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M348.017,0l1.482,0.002L349.484,13H348L348.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M354.017,0l1.482,0.002L355.484,13H354L354.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M372.017,0l1.482,0.002L373.484,13H372L372.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M378.017,0l1.482,0.002L379.484,13H378L378.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M384.017,0l1.482,0.002L385.484,13H384L384.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M390.017,0l1.482,0.002L391.484,13H390L390.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M396.017,0l1.482,0.002L397.484,13H396L396.017,0z/＆GT;
＆LT;路径填充=＃80A993D =M402.017,0l1.482,0.002L403.484,13H402L402.017,0z/＆GT;
＆所述; / g取代;
＆LT; / SVG＆GT;
解决方案
下面是做到这一点的一种方式：用动画线性渐变
\r
\r\r
\r＆LT; SVG版本=1.1ID =Layer_1的xmlns =HTTP ：//www.w3.org/2000/svg的xmlns：XLink的=http://www.w3.org/1999/xlinkX =0像素Y =0像素\r
宽度=403.5px高度=13px的视框=0 0 403.5 13使背景=新0 0 403.5 13的xml：空间=preserve＆GT;\r
＆LT;＆DEFS GT;\r
＆LT;的LinearGradient ID =橙毕业生gradientUnits =userSpaceOnUse＆GT;\r
＆LT;停止偏移=0停止色=橙色/＆GT;\r
＆LT;停止偏移=0停止色=橙色＆GT;\r
＆LT;动画的attributeName =抵消属性类型=XML\r
开始=0DUR =5S补=冻结从=0=1/＆GT;\r
＆LT; /停止＆GT;\r
＆LT;停止偏移=0停止色=＃80A993＆GT;\r
＆LT;动画的attributeName =抵消属性类型=XML\r
开始=0DUR =5S补=冻结从=0=1/＆GT;\r
＆LT; /停止＆GT;\r
＆LT;停止偏移=1停止色=＃80A993/＆GT;\r
＆LT; /＆的LinearGradient GT;\r
＆LT; / DEFS＆GT;\r
＆LT克填充=URL（＃橙毕业生）＆GT;\r
＆LT;路径D =M0.017,0L1.5,0.002L1.484,13H0L0.017,0z/＆GT;\r
＆LT;路径D =M6.017,0L7.5,0.002L7.484,13H6L6.017,0z/＆GT;\r
＆LT;路径D =M12.017,0L13.5,0.002L13.484,13H12L12.017,0z/＆GT;\r
＆LT;路径D =M18.017,0L19.5,0.002L19.484,13H18L18.017,0z/＆GT;\r
＆LT;路径D =M36.017,0L37.5,0.002L37.484,13H36L36.017,0z/＆GT;\r
＆LT;路径D =M42.017,0L43.5,0.002L43.484,13H42L42.017,0z/＆GT;\r
＆LT;路径D =M24.017,0L25.5,0.002L25.484,13H24L24.017,0z/＆GT;\r
＆LT;路径D =M30.017,0L31.5,0.002L31.484,13H30L30.017,0z/＆GT;\r
＆LT;路径D =M48.017,0L49.5,0.002L49.484,13H48L48.017,0z/＆GT;\r
＆LT;路径D =M54.017,0L55.5,0.002L55.484,13H54L54.017,0z/＆GT;\r
＆LT;路径D =M60.017,0L61.5,0.002L61.484,13H60L60.017,0z/＆GT;\r
＆LT;路径D =M66.017,0L67.5,0.002L67.484,13H66L66.017,0z/＆GT;\r
＆LT;路径D =M72.017,0L73.5,0.002L73.484,13H72L72.017,0z/＆GT;\r
＆LT;路径D =M78.017,0L79.5,0.002L79.484,13H78L78.017,0z/＆GT;\r
＆LT;路径D =M84.017,0L85.5,0.002L85.484,13H84L84.017,0z/＆GT;\r
＆LT;路径D =M90.017,0L91.5,0.002L91.484,13H90L90.017,0z/＆GT;\r
＆LT;路径D =M96.017,0L97.5,0.002L97.484,13H96L96.017,0z/＆GT;\r
＆LT;路径D =M102.017,0l1.483,0.002L103.484,13H102L102.017,0z/＆GT;\r
＆LT;路径D =M108.017,0l1.483,0.002L109.484,13H108L108.017,0z/＆GT;\r
＆LT;路径D =M114.017,0l1.483,0.002L115.484,13H114L114.017,0z/＆GT;\r
＆LT;路径D =M120.017,0l1.483,0.002L121.484,13H120L120.017,0z/＆GT;\r
＆LT;路径D =M126.017,0l1.483,0.002L127.484,13H126L126.017,0z/＆GT;\r
＆LT;路径D =M144.017,0l1.483,0.002L145.484,13H144L144.017,0z/＆GT;\r
＆LT;路径D =M150.017,0l1.483,0.002L151.484,13H150L150.017,0z/＆GT;\r
＆LT;路径D =M132.017,0l1.483,0.002L133.484,13H132L132.017,0z/＆GT;\r
＆LT;路径D =M138.017,0l1.483,0.002L139.484,13H138L138.017,0z/＆GT;\r
＆LT;路径D =M156.017,0l1.483,0.002L157.484,13H156L156.017,0z/＆GT;\r
＆LT;路径D =M162.017,0l1.483,0.002L163.484,13H162L162.017,0z/＆GT;\r
＆LT;路径D =M168.017,0l1.483,0.002L169.484,13H168L168.017,0z/＆GT;\r
＆LT;路径D =M174.017,0l1.483,0.002L175.484,13H174L174.017,0z/＆GT;\r
＆LT;路径D =M180.017,0l1.483,0.002L181.484,13H180L180.017,0z/＆GT;\r
＆LT;路径D =M186.017,0l1.483,0.002L187.484,13H186L186.017,0z/＆GT;\r
＆LT;路径D =M192.017,0l1.483,0.002L193.484,13H192L192.017,0z/＆GT;\r
＆LT;路径D =M198.017,0l1.483,0.002L199.484,13H198L198.017,0z/＆GT;\r
＆LT;路径D =M204.017,0l1.483,0.002L205.484,13H204L204.017,0z/＆GT;\r
＆LT;路径D =M210.017,0l1.483,0.002L211.484,13H210L210.017,0z/＆GT;\r
＆LT;路径D =M216.017,0l1.483,0.002L217.484,13H216L216.017,0z/＆GT;\r
＆LT;路径D =M222.017,0l1.483,0.002L223.484,13H222L222.017,0z/＆GT;\r
＆LT;路径D =M228.017,0l1.483,0.002L229.484,13H228L228.017,0z/＆GT;\r
＆LT;路径D =M234.017,0l1.483,0.002L235.484,13H234L234.017,0z/＆GT;\r
＆LT;路径D =M252.017,0l1.483,0.002L253.484,13H252L252.017,0z/＆GT;\r
＆LT;路径D =M258.017,0l1.483,0.002L259.484,13H258L258.017,0z/＆GT;\r
＆LT;路径D =M240.017,0l1.483,0.002L241.484,13H240L240.017,0z/＆GT;\r
＆LT;路径D =M246.017,0l1.483,0.002L247.484,13H246L246.017,0z/＆GT;\r
＆LT;路径D =M264.017,0l1.483,0.002L265.484,13H264L264.017,0z/＆GT;\r
＆LT;路径D =M270.017,0l1.483,0.002L271.484,13H270L270.017,0z/＆GT;\r
＆LT;路径D =M276.017,0l1.482,0.002L277.484,13H276L276.017,0z/＆GT;\r
＆LT;路径D =M282.017,0l1.482,0.002L283.484,13H282L282.017,0z/＆GT;\r
＆LT;路径D =M288.017,0l1.482,0.002L289.484,13H288L288.017,0z/＆GT;\r
＆LT;路径D =M294.017,0l1.482,0.002L295.484,13H294L294.017,0z/＆GT;\r
＆LT;路径D =M300.017,0l1.482,0.002L301.484,13H300L300.017,0z/＆GT;\r
＆LT;路径D =M306.017,0l1.482,0.002L307.484,13H306L306.017,0z/＆GT;\r
＆LT;路径D =M312.017,0l1.482,0.002L313.484,13H312L312.017,0z/＆GT;\r
＆LT;路径D =M318.017,0l1.482,0.002L319.484,13H318L318.017,0z/＆GT;\r
＆LT;路径D =M324.017,0l1.482,0.002L325.484,13H324L324.017,0z/＆GT;\r
＆LT;路径D =M330.017,0l1.482,0.002L331.484,13H330L330.017,0z/＆GT;\r
＆LT;路径D =M336.017,0l1.482,0.002L337.484,13H336L336.017,0z/＆GT;\r
＆LT;路径D =M342.017,0l1.482,0.002L343.484,13H342L342.017,0z/＆GT;\r
＆LT;路径D =M360.017,0l1.482,0.002L361.484,13H360L360.017,0z/＆GT;\r
＆LT;路径D =M366.017,0l1.482,0.002L367.484,13H366L366.017,0z/＆GT;\r
＆LT;路径D =M348.017,0l1.482,0.002L349.484,13H348L348.017,0z/＆GT;\r
＆LT;路径D =M354.017,0l1.482,0.002L355.484,13H354L354.017,0z/＆GT;\r
＆LT;路径D =M372.017,0l1.482,0.002L373.484,13H372L372.017,0z/＆GT;\r
＆LT;路径D =M378.017,0l1.482,0.002L379.484,13H378L378.017,0z/＆GT;\r
＆LT;路径D =M384.017,0l1.482,0.002L385.484,13H384L384.017,0z/＆GT;\r
＆LT;路径D =M390.017,0l1.482,0.002L391.484,13H390L390.017,0z/＆GT;\r
＆LT;路径D =M396.017,0l1.482,0.002L397.484,13H396L396.017,0z/＆GT;\r
＆LT;路径D =M402.017,0l1.482,0.002L403.484,13H402L402.017,0z/＆GT;\r
＆所述; / g取代;\r
＆LT; / SVG＆GT; \r
更新：如何手动触发和反向
在这里，我用创建图表的方式不同。这种变体使用剪切路径和幻灯片橙色矩形来回剪辑后面。由于所要求的OP，我已经加入将鼠标移至几个按钮来触发动画和切换方向的能力。
本例使用香草JavaScript和基本的动画超时功能。如果你愿意，你可以切换到使用 window.requestAnimationFrame（）方法，如果有很多事情你的页面和动画不流畅运行。
\r
\r\r
\r VAR graphPosition = 0;\r
VAR graphStep = 6;\r
VAR graphRunning = FALSE;\r
\r
VAR orangeRect =的document.getElementById（橙色）;\r
\r
\r
的document.getElementById（转发）。的addEventListener（的mouseenter功能（）{\r
graphStep = 6;\r
startGraphRunning（）;\r
}）;\r
\r
的document.getElementById（反向）。的addEventListener（的mouseenter功能（）{\r
graphStep = -6;\r
startGraphRunning（）;\r
}）;\r
\r
\r
\r
功能startGraphRunning（）\r
{\r
//如果已经在运行，什么都不做\r
如果（graphRunning）回报;\r
\r
graphRunning = TRUE;\r
\r
//执行动画的第一步\r
animationStep（）;\r
}\r
\r
\r
功能animationStep（）\r
{\r
//计算红毛矩形的新位置\r
VAR newPos = graphPosition + = graphStep;\r
如果（newPos℃，|| newPos＆GT; 408）\r
{\r
//停止动画，如果我们有达到最小或最大位置\r
graphRunning = FALSE;\r
}\r
其他\r
{\r
//橙色矩形的更新x位置\r
graphPosition = newPos;\r
//我们要矩形的右手边是在graphPosition\r
//所以我们位置（graphPosition - 矩形宽）RECT\r
orangeRect.setAttribute（×，graphPosition - orangeRect.width.baseVal.value）;\r
}\r
\r
//如果动画仍然在运行，在50毫秒再次调用此函数\r
如果（graphRunning）\r
的setTimeout（animationStep，50）;\r
} \r
DIV {\r
显示：inline-block的;\r
填充：10px的;\r
背景色：#eee;\r
边框：1px的固体黑色;\r
保证金：20像素20像素0 0;\r
} \r
＆LT; SVG版本=1.1ID =Layer_1的xmlns =HTTP ：//www.w3.org/2000/svg的xmlns：XLink的=http://www.w3.org/1999/xlinkX =0像素Y =0像素\r
宽度=403.5px高度=13px的视框=0 0 403.5 13使背景=新0 0 403.5 13的xml：空间=preserve＆GT;\r
＆LT;＆DEFS GT;\r
＆LT; clipPath ID =图＆GT;\r
＆LT;路径D =M0.017,0L1.5,0.002L1.484,13H0L0.017,0z/＆GT;\r
＆LT;路径D =M6.017,0L7.5,0.002L7.484,13H6L6.017,0z/＆GT;\r
＆LT;路径D =M12.017,0L13.5,0.002L13.484,13H12L12.017,0z/＆GT;\r
＆LT;路径D =M18.017,0L19.5,0.002L19.484,13H18L18.017,0z/＆GT;\r
＆LT;路径D =M36.017,0L37.5,0.002L37.484,13H36L36.017,0z/＆GT;\r
＆LT;路径D =M42.017,0L43.5,0.002L43.484,13H42L42.017,0z/＆GT;\r
＆LT;路径D =M24.017,0L25.5,0.002L25.484,13H24L24.017,0z/＆GT;\r
＆LT;路径D =M30.017,0L31.5,0.002L31.484,13H30L30.017,0z/＆GT;\r
＆LT;路径D =M48.017,0L49.5,0.002L49.484,13H48L48.017,0z/＆GT;\r
＆LT;路径D =M54.017,0L55.5,0.002L55.484,13H54L54.017,0z/＆GT;\r
＆LT;路径D =M60.017,0L61.5,0.002L61.484,13H60L60.017,0z/＆GT;\r
＆LT;路径D =M66.017,0L67.5,0.002L67.484,13H66L66.017,0z/＆GT;\r
＆LT;路径D =M72.017,0L73.5,0.002L73.484,13H72L72.017,0z/＆GT;\r
＆LT;路径D =M78.017,0L79.5,0.002L79.484,13H78L78.017,0z/＆GT;\r
＆LT;路径D =M84.017,0L85.5,0.002L85.484,13H84L84.017,0z/＆GT;\r
＆LT;路径D =M90.017,0L91.5,0.002L91.484,13H90L90.017,0z/＆GT;\r
＆LT;路径D =M96.017,0L97.5,0.002L97.484,13H96L96.017,0z/＆GT;\r
＆LT;路径D =M102.017,0l1.483,0.002L103.484,13H102L102.017,0z/＆GT;\r
＆LT;路径D =M108.017,0l1.483,0.002L109.484,13H108L108.017,0z/＆GT;\r
＆LT;路径D =M114.017,0l1.483,0.002L115.484,13H114L114.017,0z/＆GT;\r
＆LT;路径D =M120.017,0l1.483,0.002L121.484,13H120L120.017,0z/＆GT;\r
＆LT;路径D =M126.017,0l1.483,0.002L127.484,13H126L126.017,0z/＆GT;\r
＆LT;路径D =M144.017,0l1.483,0.002L145.484,13H144L144.017,0z/＆GT;\r
＆LT;路径D =M150.017,0l1.483,0.002L151.484,13H150L150.017,0z/＆GT;\r
＆LT;路径D =M132.017,0l1.483,0.002L133.484,13H132L132.017,0z/＆GT;\r
＆LT;路径D =M138.017,0l1.483,0.002L139.484,13H138L138.017,0z/＆GT;\r
＆LT;路径D =M156.017,0l1.483,0.002L157.484,13H156L156.017,0z/＆GT;\r
＆LT;路径D =M162.017,0l1.483,0.002L163.484,13H162L162.017,0z/＆GT;\r
＆LT;路径D =M168.017,0l1.483,0.002L169.484,13H168L168.017,0z/＆GT;\r
＆LT;路径D =M174.017,0l1.483,0.002L175.484,13H174L174.017,0z/＆GT;\r
＆LT;路径D =M180.017,0l1.483,0.002L181.484,13H180L180.017,0z/＆GT;\r
＆LT;路径D =M186.017,0l1.483,0.002L187.484,13H186L186.017,0z/＆GT;\r
＆LT;路径D =M192.017,0l1.483,0.002L193.484,13H192L192.017,0z/＆GT;\r
＆LT;路径D =M198.017,0l1.483,0.002L199.484,13H198L198.017,0z/＆GT;\r
＆LT;路径D =M204.017,0l1.483,0.002L205.484,13H204L204.017,0z/＆GT;\r
＆LT;路径D =M210.017,0l1.483,0.002L211.484,13H210L210.017,0z/＆GT;\r
＆LT;路径D =M216.017,0l1.483,0.002L217.484,13H216L216.017,0z/＆GT;\r
＆LT;路径D =M222.017,0l1.483,0.002L223.484,13H222L222.017,0z/＆GT;\r
＆LT;路径D =M228.017,0l1.483,0.002L229.484,13H228L228.017,0z/＆GT;\r
＆LT;路径D =M234.017,0l1.483,0.002L235.484,13H234L234.017,0z/＆GT;\r
＆LT;路径D =M252.017,0l1.483,0.002L253.484,13H252L252.017,0z/＆GT;\r
＆LT;路径D =M258.017,0l1.483,0.002L259.484,13H258L258.017,0z/＆GT;\r
＆LT;路径D =M240.017,0l1.483,0.002L241.484,13H240L240.017,0z/＆GT;\r
＆LT;路径D =M246.017,0l1.483,0.002L247.484,13H246L246.017,0z/＆GT;\r
＆LT;路径D =M264.017,0l1.483,0.002L265.484,13H264L264.017,0z/＆GT;\r
＆LT;路径D =M270.017,0l1.483,0.002L271.484,13H270L270.017,0z/＆GT;\r
＆LT;路径D =M276.017,0l1.482,0.002L277.484,13H276L276.017,0z/＆GT;\r
＆LT;路径D =M282.017,0l1.482,0.002L283.484,13H282L282.017,0z/＆GT;\r
＆LT;路径D =M288.017,0l1.482,0.002L289.484,13H288L288.017,0z/＆GT;\r
＆LT;路径D =M294.017,0l1.482,0.002L295.484,13H294L294.017,0z/＆GT;\r
＆LT;路径D =M300.017,0l1.482,0.002L301.484,13H300L300.017,0z/＆GT;\r
＆LT;路径D =M306.017,0l1.482,0.002L307.484,13H306L306.017,0z/＆GT;\r
＆LT;路径D =M312.017,0l1.482,0.002L313.484,13H312L312.017,0z/＆GT;\r
＆LT;路径D =M318.017,0l1.482,0.002L319.484,13H318L318.017,0z/＆GT;\r
＆LT;路径D =M324.017,0l1.482,0.002L325.484,13H324L324.017,0z/＆GT;\r
＆LT;路径D =M330.017,0l1.482,0.002L331.484,13H330L330.017,0z/＆GT;\r
＆LT;路径D =M336.017,0l1.482,0.002L337.484,13H336L336.017,0z/＆GT;\r
＆LT;路径D =M342.017,0l1.482,0.002L343.484,13H342L342.017,0z/＆GT;\r
＆LT;路径D =M360.017,0l1.482,0.002L361.484,13H360L360.017,0z/＆GT;\r
＆LT;路径D =M366.017,0l1.482,0.002L367.484,13H366L366.017,0z/＆GT;\r
＆LT;路径D =M348.017,0l1.482,0.002L349.484,13H348L348.017,0z/＆GT;\r
＆LT;路径D =M354.017,0l1.482,0.002L355.484,13H354L354.017,0z/＆GT;\r
＆LT;路径D =M372.017,0l1.482,0.002L373.484,13H372L372.017,0z/＆GT;\r
＆LT;路径D =M378.017,0l1.482,0.002L379.484,13H378L378.017,0z/＆GT;\r
＆LT;路径D =M384.017,0l1.482,0.002L385.484,13H384L384.017,0z/＆GT;\r
＆LT;路径D =M390.017,0l1.482,0.002L391.484,13H390L390.017,0z/＆GT;\r
＆LT;路径D =M396.017,0l1.482,0.002L397.484,13H396L396.017,0z/＆GT;\r
＆LT;路径D =M402.017,0l1.482,0.002L403.484,13H402L402.017,0z/＆GT;\r
＆LT; /掩码＆GT;\r
＆LT; / DEFS＆GT;\r
\r
＆LT; G字夹路径=URL（#graph）＆GT;\r
＆LT; RECT X =0Y =0WIDTH =408HEIGHT =13补=绿色/＆GT;\r
＆LT; RECT X = - 408Y =0WIDTH =408HEIGHT =13补=橙色ID =橙色/＆GT;\r
＆所述; / g取代;\r
\r
＆LT; / SVG＆GT;\r
\r
＆LT; BR /＆GT;\r
＆LT; DIV ID =向前＆GT;前锋＆LT; / DIV＆GT;\r
＆LT; DIV ID =倒退＆GT;向后＆LT; / DIV＆GT; \r
I'm trying to make an svg animation where the color of the svg slides to an other color. My goal is to make kind of a running light.
I'm not trying to fade the fill color of the whole svg as seen in a lot of examples.
Here is an example photo with a few frames of the animation. svg animation
I've tried a few different technics but couldn't find a good one.
This is how i did it with css keyframes:
$.keyframe.define([{
name: 'shift',
'0%': {'background-position':'0px'},
'2%': {'background-position':'6px'},
'4%': {'background-position':'12px'},
'6%': {'background-position':'18px'},
'8%': {'background-position':'24px'},
'10%': {'background-position':'30px'},
'12%': {'background-position':'36px'},
'14%': {'background-position':'42px'},
'16%': {'background-position':'48px'},
'18%': {'background-position':'54px'},
'20%': {'background-position':'60px'},
'22%': {'background-position':'66px'},
'24%': {'background-position':'72px'},
'26%': {'background-position':'78px'},
'28%': {'background-position':'84px'},
'30%': {'background-position':'90px'},
'32%': {'background-position':'96px'},
'34%': {'background-position':'102px'},
'36%': {'background-position':'108px'},
'38%': {'background-position':'114px'},
'40%': {'background-position':'120px'},
'42%': {'background-position':'126px'},
'44%': {'background-position':'132px'},
'46%': {'background-position':'138px'},
'48%': {'background-position':'144px'},
'50%': {'background-position':'150px'},
'52%': {'background-position':'156px'},
'54%': {'background-position':'162px'},
'56%': {'background-position':'168px'},
'58%': {'background-position':'174px'},
'60%': {'background-position':'180px'},
'62%': {'background-position':'186px'},
'64%': {'background-position':'192px'},
'66%': {'background-position':'198px'},
'68%': {'background-position':'204px'},
'70%': {'background-position':'210px'},
'72%': {'background-position':'216px'},
'74%': {'background-position':'222px'},
'76%': {'background-position':'228px'},
'78%': {'background-position':'234px'},
'80%': {'background-position':'240px'},
'82%': {'background-position':'246px'},
'84%': {'background-position':'252px'},
'86%': {'background-position':'258px'},
'88%': {'background-position':'264px'},
'90%': {'background-position':'270px'},
'92%': {'background-position':'276px'},
'94%': {'background-position':'282px'},
'96%': {'background-position':'288px'},
'98%': {'background-position':'294px'},
'100%': {'background-position':'300px'}
}]);
$('.ledbar').playKeyframe({
name: 'shift',
duration: "4s",
timingFunction: 'linear',
delay: 0,
direction: 'reverse',
fillMode: 'forwards',
});
The oranje part moves over the green. The svg was drawn so that every rectangle was just 6px further than the other one. this didn't work becouse of the smooth transition between two keyframes. This made the animation flicker. Maybe if the animation was in steps it would work but i don't know how this works and i thing there has to be a better way.
So i'm wondering how i could liniear shift the color of the svg in to an other color. I've looked at svg masks etc. but couldn't figuer it out.
This is the svg file, maybe its useful:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!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"
width="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve">
<g id="Button_2_-_Green">
</g>
<g>
<path fill="#80A993" d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/>
<path fill="#80A993" d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/>
<path fill="#80A993" d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/>
<path fill="#80A993" d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/>
<path fill="#80A993" d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/>
<path fill="#80A993" d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/>
<path fill="#80A993" d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/>
<path fill="#80A993" d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/>
<path fill="#80A993" d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/>
<path fill="#80A993" d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/>
<path fill="#80A993" d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/>
<path fill="#80A993" d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/>
<path fill="#80A993" d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/>
<path fill="#80A993" d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/>
<path fill="#80A993" d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/>
<path fill="#80A993" d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/>
<path fill="#80A993" d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/>
<path fill="#80A993" d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/>
<path fill="#80A993" d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/>
<path fill="#80A993" d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/>
<path fill="#80A993" d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/>
<path fill="#80A993" d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/>
<path fill="#80A993" d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/>
<path fill="#80A993" d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/>
<path fill="#80A993" d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/>
<path fill="#80A993" d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/>
<path fill="#80A993" d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/>
<path fill="#80A993" d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/>
<path fill="#80A993" d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/>
<path fill="#80A993" d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/>
<path fill="#80A993" d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/>
<path fill="#80A993" d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/>
<path fill="#80A993" d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/>
<path fill="#80A993" d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/>
<path fill="#80A993" d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/>
<path fill="#80A993" d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/>
<path fill="#80A993" d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/>
<path fill="#80A993" d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/>
<path fill="#80A993" d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/>
<path fill="#80A993" d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/>
<path fill="#80A993" d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/>
<path fill="#80A993" d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/>
<path fill="#80A993" d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/>
<path fill="#80A993" d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/>
<path fill="#80A993" d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/>
<path fill="#80A993" d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/>
<path fill="#80A993" d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/>
<path fill="#80A993" d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/>
<path fill="#80A993" d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/>
<path fill="#80A993" d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/>
<path fill="#80A993" d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/>
<path fill="#80A993" d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/>
<path fill="#80A993" d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/>
<path fill="#80A993" d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/>
<path fill="#80A993" d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/>
<path fill="#80A993" d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/>
<path fill="#80A993" d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/>
<path fill="#80A993" d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/>
<path fill="#80A993" d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/>
<path fill="#80A993" d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/>
<path fill="#80A993" d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/>
<path fill="#80A993" d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/>
<path fill="#80A993" d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/>
<path fill="#80A993" d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/>
<path fill="#80A993" d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/>
<path fill="#80A993" d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/>
<path fill="#80A993" d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/>
<path fill="#80A993" d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/>
</g>
</svg>
解决方案
Here is one way to do it: with an animated linear gradient.
<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"
width="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve">
<defs>
<linearGradient id="orange-grad" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="orange"/>
<stop offset="0" stop-color="orange">
<animate attributeName="offset" attributeType="XML"
begin="0s" dur="5s" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="#80A993">
<animate attributeName="offset" attributeType="XML"
begin="0s" dur="5s" fill="freeze" from="0" to="1" />
</stop>
<stop offset="1" stop-color="#80A993"/>
</linearGradient>
</defs>
<g fill="url(#orange-grad)">
<path d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/>
<path d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/>
<path d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/>
<path d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/>
<path d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/>
<path d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/>
<path d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/>
<path d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/>
<path d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/>
<path d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/>
<path d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/>
<path d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/>
<path d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/>
<path d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/>
<path d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/>
<path d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/>
<path d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/>
<path d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/>
<path d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/>
<path d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/>
<path d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/>
<path d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/>
<path d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/>
<path d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/>
<path d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/>
<path d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/>
<path d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/>
<path d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/>
<path d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/>
<path d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/>
<path d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/>
<path d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/>
<path d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/>
<path d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/>
<path d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/>
<path d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/>
<path d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/>
<path d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/>
<path d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/>
<path d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/>
<path d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/>
<path d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/>
<path d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/>
<path d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/>
<path d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/>
<path d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/>
<path d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/>
<path d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/>
<path d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/>
<path d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/>
<path d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/>
<path d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/>
<path d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/>
<path d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/>
<path d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/>
<path d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/>
<path d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/>
<path d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/>
<path d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/>
<path d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/>
<path d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/>
<path d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/>
<path d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/>
<path d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/>
<path d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/>
<path d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/>
<path d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/>
<path d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/>
</g>
</svg>
Update: How to manually trigger and reverse direction
Here I've used a different way of creating the graph. This variant uses a clipping path and slides an orange rect back and forth behind the clip. As requested by OP, I have added the ability to trigger the animation and switch directions by mousing over a couple of buttons.
This example uses vanilla Javascript and a timeout function for basic animation. If you wanted, you could switch to using a window.requestAnimationFrame() approach if there is a lot going on on your page and the animation doesn't run smoothly.
var graphPosition = 0;
var graphStep = 6;
var graphRunning = false;
var orangeRect = document.getElementById("orange");
document.getElementById("forwards").addEventListener("mouseenter", function() {
graphStep = 6;
startGraphRunning();
});
document.getElementById("backwards").addEventListener("mouseenter", function() {
graphStep = -6;
startGraphRunning();
});
function startGraphRunning()
{
// If already running, do nothing
if (graphRunning) return;
graphRunning = true;
// Perform the first step in the animation
animationStep();
}
function animationStep()
{
// Calculate new position of orang rectangle
var newPos = graphPosition += graphStep;
if (newPos < 0 || newPos > 408)
{
// Stop animation if we have reach min or max position
graphRunning = false;
}
else
{
// Update x position of orange rect
graphPosition = newPos;
// We want right hand edge of rectangle to be at "graphPosition",
// so we position rect at (graphPosition - rectangle-width)
orangeRect.setAttribute("x", graphPosition - orangeRect.width.baseVal.value);
}
// If animation is still running, call this function again in 50mS
if (graphRunning)
setTimeout(animationStep, 50);
}
div {
display: inline-block;
padding: 10px;
background-color: #eee;
border: solid 1px black;
margin: 20px 20px 0 0;
}
<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"
width="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve">
<defs>
<clipPath id="graph">
<path d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/>
<path d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/>
<path d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/>
<path d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/>
<path d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/>
<path d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/>
<path d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/>
<path d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/>
<path d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/>
<path d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/>
<path d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/>
<path d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/>
<path d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/>
<path d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/>
<path d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/>
<path d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/>
<path d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/>
<path d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/>
<path d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/>
<path d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/>
<path d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/>
<path d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/>
<path d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/>
<path d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/>
<path d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/>
<path d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/>
<path d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/>
<path d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/>
<path d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/>
<path d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/>
<path d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/>
<path d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/>
<path d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/>
<path d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/>
<path d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/>
<path d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/>
<path d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/>
<path d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/>
<path d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/>
<path d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/>
<path d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/>
<path d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/>
<path d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/>
<path d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/>
<path d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/>
<path d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/>
<path d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/>
<path d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/>
<path d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/>
<path d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/>
<path d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/>
<path d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/>
<path d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/>
<path d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/>
<path d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/>
<path d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/>
<path d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/>
<path d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/>
<path d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/>
<path d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/>
<path d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/>
<path d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/>
<path d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/>
<path d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/>
<path d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/>
<path d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/>
<path d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/>
<path d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/>
</mask>
</defs>
<g clip-path="url(#graph)">
<rect x="0" y="0" width="408" height="13" fill="green"/>
<rect x="-408" y="0" width="408" height="13" fill="orange" id="orange"/>
</g>
</svg>
<br />
<div id="forwards">Forwards</div>
<div id="backwards">Backwards</div>
这篇关于jQuery的SVG转变彩动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![SVG动画](\"http://i.stack.imgur.com/rkoU7.jpg\"){kind=link}
