javascript - 使用 jQuery 更改路径上的 SVG 描边

Question

我已将我的 SVG 图像设置为 div 的背景。现在我想每隔 x 秒用 jQuery 更改特定路径的笔画。我看过一个示例 ( click me )，其中基本上完成了此操作。

到目前为止，这是我的 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 等于我们当前的索引，则跳过它(返回 true)并继续:
9. 搜索 ID 为 outline_path 的路径，并将笔画更改为我们当前迭代中所在的元素
10. 同时将导航边框颜色更改为该颜色
11. 自增 lastIndex 并返回

我可以通过更改 var _currStroke 来更改颜色，但是“每 x 秒执行一次”的操作根本不起作用。请注意，我是 JS(和 SVG)的初学者。感谢您的帮助。

我做了一个CodePen来说明:CodePen

Answer 1

Working live demo

你的代码中有很多问题，
我将尝试涵盖所有内容:

1. 你使用了一个 HTML 元素 <nav>但在你的代码中你正试图定位一些 ID:$("#nav").css(您想要的正确选择器是实际上是你已经在你的代码中使用的那个，那就是 $("nav")

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

3. 您正在数组中设置无效颜色 '32cd32' 不是十六进制颜色，而'#32cd32'是。

4. $("outline_path") 不是 ID 选择器 ^参见•1，但无论如何都为时已晚以它为目标，因为您的 SVG 现在是 base64 数据图像^参见•2。

5. 无需记住 lastIndex颜色并再次迭代你的颜色数组 $.each ，只需使用一个数组计数器指针，改为创建该计数器，并使用 提醒运算符 % 对颜色总数来循环递增的计数器:++counter%totColors

6. .attr('style', "stroke:'+this+'") 是不正确的字符串 + var 连接。应该是这样的:.attr('style', "stroke:'"+ this +"'") double 里面的都是字符串，外面都是+串联变量。

7. 您需要预先创建所有图像，以防止间隔开始计时后出现空白(正在创建图像)。

8. 您将无法设置 transition: stroke .4s ease;到图像。对不起。您可能想探索淡化背景图像的其他一些技巧(涉及 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);
});