title: Change SVG stroke on path with jQuery
body: <p>I've set my SVG image as the background of a div. Now I want to change the stroke of a specific path with jQuery every x seconds. I've seen an example (<a href="http://bl.ocks.org/widged/4545199" rel="nofollow">click me</a>) where this is basically done.</p>
  
  <p>This is my jQuery so far:</p>
  
  <pre><code>$(document).ready(function(){
  
    var _currStroke = 'ffa500';
  
    var svg = '&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  x="0px" y="0px" width="60px" height="60px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"&gt; &lt;path d="M69.527,2H29.971L2,29.971v39.558L29.971,97.5h39.558L97.5,69.527V29.972L69.527,2z M95.625,68.898L68.898,95.625H31.101  L4.375,68.898V31.516v-0.414L31.102,4.375h37.796l26.728,26.727L95.625,68.898L95.625,68.898z"/&gt; &lt;path d="M68.07,6.375H31.93L6.375,31.93v36.142L31.93,93.626h36.142L93.625,68.07V31.93L68.07,6.375z" id="outline_path" style="stroke:'+_currStroke+'; transition: stroke .4s ease; opacity: 0.5" /&gt; &lt;/svg&gt;';
  
    var encoded = window.btoa(svg);
    $("nav").css("background", "url(data:image/svg+xml;base64,"+encoded+")");
  
    /* change stroke color every x seconds (atm: 3) */
    var changingTimeInMS = 3000;
    var currentColor = $("outline_path").attr('stroke');
    setInterval(function() {    
  
      var lastIndex = changeStrokeColor(currentColor, lastIndex);
  
    }, changingTimeInMS);
  
  });
  
  function changeStrokeColor(currentColor, lastIndex) {
  
      var colors = ['32cd32',  /* limegreen */
                  '00ffff',  /* cyan */
                  'ffa500',  /* orange */
                  'ffffff']; /* white */
  
      $.each(colors, function(lastIndex) {
        if(colors[lastIndex] == currentColor) {
            return true;
        }
        $("#outline_path").attr('style', "stroke:'+this+'");
        $("#nav").css('border-color', this);
  
        lastIndex++;
        return lastIndex;
  });
  
  }
  </code></pre>
  
  <p>So let's go through it real quick:</p>
  
  <ol>
  <li>I defined a stroke color to start with (_currStroke = 'ffa500')</li>
  <li>I encode the svg and set it as the background of my nav</li>
  <li>Please notice the svg path: it has an id (#'outline_path') and a styling: <code>style="stroke:'+_currStroke+'; transition: stroke .4s ease; opacity: 0.5"</code> </li>
  <li>Save the current stroke color in a variable (currentColor)</li>
  <li>call changeStrokeColor-function every <code>changeTimeInMS</code> - seconds</li>
  <li>save the return value of changeStrokeColor in a variable (lastIndex)</li>
  <li>changeStrokeColors expects two variables: the current color of the stroke and the last index (is the first call of changeStrokeColors even possible? lastIndex is not declared yet but I can't set it to 0 for example because then it would be resetted every x seconds)</li>
  <li>Iterate through the colors-array; if the currentColor is equal to the index we are at the moment, skip it (<code>return true</code>) and continue with:</li>
  <li>search for the path with the id <code>outline_path</code> and change the stroke to the element we are at right now in our iteration</li>
  <li>Also change the nav border color to that color</li>
  <li>increment lastIndex and return it</li>
  </ol>
  
  <p>I can change the color with changing var _currStroke but the 'do-it-every-x-seconds'-thing is not working at all. Please note that I'm a beginner in JS (and SVGs). Any help is appreciated.</p>
  
  <p>I made a CodePen to illustrate: <a href="http://codepen.io/sqe/pen/DFqly" rel="nofollow">CodePen</a></p>