首页 文章

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

提问于
浏览 次
3

我已经看到了一个例子（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 = 'ffa500'）

  • 我对svg进行编码并将其设置为导航的背景

  • 请注意svg路径：它有一个id（＃'outline_path'）和样式： style="stroke:'+_currStroke+'; transition: stroke .4s ease; opacity: 0.5"

  • 将当前笔触颜色保存在变量（currentColor）中

  • 调用changeStrokeColor-function每 changeTimeInMS - 秒

  • 在变量中保存changeStrokeColor的返回值（lastIndex）

  • changeStrokeColors需要两个变量：笔画的当前颜色和最后一个索引（第一次调用changeStrokeColors甚至可能？lastIndex尚未声明但我不能将其设置为0，例如因为它会被重置每个x秒）

  • 遍历colors-array;如果currentColor等于我们目前的索引，则跳过它（ return true ）并继续：

  • 搜索id为 outline_path 的路径，并在我们的迭代中将笔划更改为我们现在所在的元素

  • 还将导航边框颜色更改为该颜色

  • 增加lastIndex并返回它

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

我做了一个CodePen来说明：CodePen

javascript jquery html5 svg stroke

1 回答

  • 2

    Working live demo

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

    • 您使用的是HTML元素 <nav> 但是在您的代码中 you're trying to target some ID ： $("#nav").css( 您想要的正确选择器实际上是您在代码中使用的那个，那就是 $("nav")

    • 你是 converting 你的SVG元素 to base64 data-image .
      一旦它不再是一个活物体**你可以操纵，所以基本上你需要在使用它之前重新构建一个不同颜色的新图像 . 否则，您可以探索如何使用SVG <pattern> .

    • 您在数组 '32cd32' is not a HEX color 中设置 invalid colors ，而 '#32cd32' 是 .

    • $("outline_path") is not an ID selector 参见•1，但无论如何都要定位它为时已晚，因为您的SVG现在是base64数据图像，请参阅•2 .

    • 没有必要记住 lastIndex 颜色并再次遍历 $.each 中的颜色数组，只需使用数组计数器指针，增加该计数器，并使用提醒运算符％对颜色总数来循环增加的计数器： ++counter%totColors

    • .attr('style', "stroke:'+this+'") is incorrect string 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);
});
    回复于

相关问题