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 wh

Solution 1:

Here is one way to do it: with an animated linear gradient.

<svgversion="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><linearGradientid="orange-grad"gradientUnits="userSpaceOnUse"><stopoffset="0"stop-color="orange"/><stopoffset="0"stop-color="orange"><animateattributeName="offset"attributeType="XML"begin="0s"dur="5s"fill="freeze"from="0"to="1" /></stop><stopoffset="0"stop-color="#80A993"><animateattributeName="offset"attributeType="XML"begin="0s"dur="5s"fill="freeze"from="0"to="1" /></stop><stopoffset="1"stop-color="#80A993"/></linearGradient></defs><gfill="url(#orange-grad)"><pathd="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/><pathd="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/><pathd="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/><pathd="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/><pathd="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/><pathd="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/><pathd="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/><pathd="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/><pathd="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/><pathd="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/><pathd="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/><pathd="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/><pathd="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/><pathd="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/><pathd="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/><pathd="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/><pathd="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/><pathd="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/><pathd="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/><pathd="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/><pathd="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/><pathd="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/><pathd="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/><pathd="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/><pathd="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/><pathd="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/><pathd="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/><pathd="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/><pathd="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/><pathd="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/><pathd="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/><pathd="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/><pathd="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/><pathd="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/><pathd="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/><pathd="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/><pathd="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/><pathd="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/><pathd="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/><pathd="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/><pathd="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/><pathd="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/><pathd="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/><pathd="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/><pathd="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/><pathd="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/><pathd="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/><pathd="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/><pathd="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/><pathd="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/><pathd="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/><pathd="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/><pathd="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/><pathd="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/><pathd="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/><pathd="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/><pathd="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/><pathd="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/><pathd="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/><pathd="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/><pathd="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/><pathd="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/><pathd="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/><pathd="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/><pathd="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/><pathd="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/><pathd="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/><pathd="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();
});



functionstartGraphRunning()
{
  // If already running, do nothingif (graphRunning) return;

  graphRunning = true;

  // Perform the first step in the animationanimationStep();
}


functionanimationStep()
{
  // Calculate new position of orang rectanglevar  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 50mSif (graphRunning)
    setTimeout(animationStep, 50);
}

div {
  display: inline-block;
  padding: 10px;
  background-color: #eee;
  border: solid 1px black;
  margin: 20px20px00;
}

<svgversion="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><clipPathid="graph"><pathd="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/><pathd="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/><pathd="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/><pathd="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/><pathd="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/><pathd="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/><pathd="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/><pathd="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/><pathd="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/><pathd="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/><pathd="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/><pathd="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/><pathd="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/><pathd="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/><pathd="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/><pathd="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/><pathd="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/><pathd="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/><pathd="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/><pathd="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/><pathd="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/><pathd="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/><pathd="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/><pathd="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/><pathd="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/><pathd="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/><pathd="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/><pathd="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/><pathd="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/><pathd="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/><pathd="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/><pathd="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/><pathd="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/><pathd="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/><pathd="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/><pathd="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/><pathd="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/><pathd="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/><pathd="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/><pathd="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/><pathd="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/><pathd="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/><pathd="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/><pathd="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/><pathd="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/><pathd="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/><pathd="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/><pathd="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/><pathd="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/><pathd="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/><pathd="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/><pathd="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/><pathd="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/><pathd="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/><pathd="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/><pathd="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/><pathd="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/><pathd="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/><pathd="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/><pathd="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/><pathd="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/><pathd="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/><pathd="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/><pathd="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/><pathd="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/><pathd="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/><pathd="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/><pathd="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/></mask></defs><gclip-path="url(#graph)"><rectx="0"y="0"width="408"height="13"fill="green"/><rectx="-408"y="0"width="408"height="13"fill="orange"id="orange"/></g></svg><br /><divid="forwards">Forwards</div><divid="backwards">Backwards</div>