jquery svg shift color animation

问题:

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>

回答1:

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>