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

}

所以让我们快速通过它：

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

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

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

Answer 1

<强> Working live demo

代码中存在很多问题，
我将尝试覆盖所有内容：

您使用HTML元素<nav>，但在您尝试的代码中定位一些ID ：$("#nav").css(您想要的正确选择器是实际上是你已经在你的代码中使用的那个，那就是 $("nav")
您将转换您的SVG元素 数据图像 即可。
一旦它转换为图像，它就不再是你可以操作的生活对象**，所以基本上你需要在使用它之前重新构建一个具有不同颜色的新图像。否则，您可以探索如何使用SVG <pattern>。

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

$("outline_path") 不是ID选择器 ^{请参阅•1}，但无论如何都为时已晚目标它导致您的SVG现在是base64数据图像 ^见•2

无需记住lastIndex颜色并重新遍历$.each内的颜色数组，只需使用数组计数器指针，改为使用该计数器并使用提醒操作员％与总数量相对应，以循环增加的计数器：++counter%totColors

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

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

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

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

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

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

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

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

1 个答案: