我正在尝试制作一个svg动画，其中svg的颜色会滑动到另一种颜色。我的目标是成为一种运行灯。
我不是试图淡化整个svg的填充颜色，如很多例子所示。
这是一张带有几帧动画的示例照片。 svg animation
我尝试了一些不同的技术但找不到好的技术
这就是我用css关键帧做到的方式：
$.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',
});
oranje部分在绿色上移动。绘制svg，使每个矩形比另一个矩形仅6px。 由于两个关键帧之间的平滑过渡，这不起作用。这使得动画闪烁。也许如果动画是有步骤的，它会起作用，但我不知道它是如何工作的，我必须有一个更好的方法。
所以我想知道我怎么能将svg的颜色转换成另一种颜色。我看过svg面具等，但无法说出来。
这是svg文件，可能有用：
<?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>
答案 0 :(得分：2)
这是一种方法：使用动画线性渐变。
<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>
更新：如何手动触发和反转方向
我在这里使用了另一种创建图表的方式。此变体使用剪切路径并在剪辑后面来回滑动橙色矩形。根据OP的要求，我添加了通过鼠标悬停在几个按钮上来触发动画和切换方向的功能。
此示例使用vanilla Javascript和基本动画的超时功能。如果您愿意，可以切换到使用window.requestAnimationFrame()方法，如果页面上有很多内容并且动画无法顺利运行。
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>