我已将SVG图像设置为div的背景。现在,我想使用jQuery每隔x秒更改特定路径的描边。我看过一个示例(点击这里),基本上就是这样做的。
这是我的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)
- 每隔
changeTimeInMS
秒调用 changeStrokeColor 函数 - 将 changeStrokeColor 的返回值保存在变量中(lastIndex)
- changeStrokeColors 需要两个变量:描边的当前颜色和最后一个索引(第一次调用 changeStrokeColors 可能吗?lastIndex 还没有被声明,但我不能将其设置为 0,否则它会每 x 秒重置一次)
- 遍历颜色数组;如果当前颜色等于我们目前所在的索引,则跳过它(
return true
)并继续执行以下操作: - 搜索具有 id
outline_path
的路径,并将描边更改为我们在迭代中的当前元素 - 还要将导航边框颜色更改为该颜色
- 增加 lastIndex 并返回它
我可以通过更改 var _currStroke 来更改颜色,但“每隔 x 秒执行一次”的事情根本不起作用。请注意,我是 JS(和 SVG)的初学者。任何帮助都将不胜感激。
我制作了一个 CodePen 来说明:CodePen
new Image
创建的图像是从浏览器缓存中获取的。无论如何,我建议探索<pattern>
,这样你就能做更多酷炫的事情,不仅仅是应用淡入淡出效果。 - Roko C. Buljan