使用jQuery更改路径上的SVG笔划

Question

我将SVG图像设置为div的背景。 现在我想每隔x秒用jQuery更改特定路径的笔划。 我已经看到一个例子（ 点击我 ）这基本上已经完成了。

到目前为止这是我的jQuery：

$(document).ready(function(){

  var _currStroke = 'ffa500';

  var svg = '<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"> <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"/> <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" /> </svg>';

  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;
});

}

所以让我们快速通过它：

1. 我定义了一个笔触颜色（_currStroke ='ffa500'）
2. 我编码svg并将其设置为导航的背景
3. 请注意svg路径：它有一个id（＃'outline_path'）和样式： style="stroke:'+_currStroke+'; transition: stroke .4s ease; opacity: 0.5"
4. 将当前笔触颜色保存在变量中（currentColor）
5. 每次changeTimeInMS调用changeStrokeColor函数 - 秒
6. 将changeStrokeColor的返回值保存在变量中（lastIndex）
7. changeStrokeColors需要两个变量：笔画的当前颜色和最后一个索引（第一次调用changeStrokeColors甚至可能吗？lastIndex尚未声明但我不能将其设置为0，例如因为它会每x秒重置一次）
8. 迭代颜色数组; 如果currentColor等于我们目前的索引，则跳过它（ return true ）并继续：
9. 使用id outline_path搜索路径，并在我们的迭代中将笔划更改为我们现在所在的元素
10. 同时将导航边框颜色更改为该颜色
11. 递增lastIndex并返回它

我可以通过更改var _currStroke来改变颜色，但是“do-it-every-x-seconds”的东西根本不起作用。 请注意，我是JS（和SVG）的初学者。 任何帮助表示赞赏。

我制作了一个CodePen来说明： CodePen

Answer 1

现场演示

你的代码中有很多问题，
我会尽力掩盖他们：

1. 您使用HTML元素<nav>但在您的代码中， 您尝试定位一些ID ： $("#nav").css(您想要的右侧选择器实际上是您已在代码中使用的那个，而且是$("nav")

2. 您正在将 SVG元素转换 为base64 数据图像 。
   一旦它转换为图像，它就不再是你可以操作的活物**了，所以基本上你需要在使用它之前重新构建一个不同颜色的新图像。 否则，您可以探索如何使用SVG <pattern> 。

3. 你在数组中设置的无效颜色 '32cd32' 不是HEX颜色 ，而'#32cd32'是。

4. $("outline_path") 不是ID选择器， ^{请参阅•1} ，但无论如何都要定位它为时已晚，因为SVG现在是base64数据图像， ^{请参阅•2} 。

5. 没有必要记住lastIndex颜色，并在$.each再次迭代你的颜色数组，只需使用数组计数器指针，改为增加该计数器，并使用提醒操作符％对颜色总数来循环增加的计数器： ++counter%totColors

6. .attr('style', "stroke:'+this+'") 是不正确的字符串 + var连接。 应该是： .attr('style', "stroke:'"+ this +"'")其中所有双精度内部都是字符串，外部是+连接变量。

7. 您需要预先创建所有图像，以防止间隔开始滴答时出现空白间隙（正在创建图像）。

8. 你将无法设置transition: stroke .4s ease; 到图像。 抱歉。 你可能想要探索一些淡化bg图像的其他技巧（涉及2个元素）。 example1 example2 example3

9. 不要在间隔内重新重新创建变量。 让他们变得全球化。

10. 创建一个将返回新图像的函数。

这是我尝试按照您的想法和初始代码重建它：

var $nav = $("nav"), // Cache your selectors
  colors = [
  '#00ffff',  // cyan
  '#32cd32',  // limegreen
  '#ffa500',  // orange
  '#ffffff',  // white
  'red'
  ], 
  totColors = colors.length, // How many colors?
  counter = 0;               // Colors Array loop counter

function newSvg(co){
  var svg = '<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"> <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"/> <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:'+ co +'; opacity: 0.5" /> </svg>';
  return "data:image/svg+xml;base64,"+ window.btoa(svg);
}

function changeStrokeColor() {
  var co = colors[++counter%totColors]; // Increase and Loop colors
  $nav.css({
    borderColor: co,
    background : "url("+ newSvg(co) +")"
  });
}  

for(var i=0; i<totColors; i++){ // Preload all backgrounds
  var img = new Image();
  img.src = newSvg(colors[i]);
}

$(function(){ // DOM ready
  $nav.css("background", "url("+ newSvg( colors[counter] ) +")" );
  setInterval(changeStrokeColor, 1000);
});