css background动态图片,如何动态更新CSS background属性中的SVG图形

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var iStart = new Date();

var fast = 10,

slow = 1;

var bg = "url(\"data:image/svg+xml;utf8,\")";

var bgs = " %w% %h%";

var w = 99,

h = 80,

cw = 99,

ch = 80,

_bg, _bgs, rx, ry, last;

var r = 45;

var bLocked = false;

var $actionboard = $(".actionboard");

var $log = $(".log");

$actionboard.on("mousemove", function(e) {

if (!bLocked) {

var _x = e.offsetX;

var _y = e.offsetY;

w = _x;

h = _y;

}

draw();

});

$(document).on("click", function() {

var i = new Date() - iStart;

var s = " {\nbackground: " + _bg + ";\nbackground-size: " + _bgs + ";\n}";

if (last !== s) {

$log.val(".rep" + i + s + "\n\n" + $log.val());

last = s;

} else {

$log.toggleClass("blink");

}

})

function draw() {

_bg = bg.replace(/%r%/g, r).replace(/%cw%/g, cw).replace(/%w%/g, w).replace(/%ch%/g, ch).replace(/%h%/g, h);

_bgs = bgs.replace(/%w%/g, w + "px").replace(/%h%/g, h + "px");

$actionboard.css({

"background": _bg,

"background-size": _bgs

});

};

$(window).on("keydown", function(e) {

var code = e.keyCode ? e.keyCode : e.which;

var bShift = !!e.shiftKey;

var bAlt = !!e.altKey;

switch (code) {

case 38: // up. move up

cw += (bShift) ? fast : slow;

break;

case 40: // down. move down

cw -= (bShift) ? fast : slow;

break;

case 39: // right. rotate with clockvise, move to right

(bAlt) ? (r += 5) : (bShift) ? ch += fast: ch += slow;

break;

case 37: // left. rotate anti-clockvise, move to left

(bAlt) ? (r -= 5) : (bShift) ? ch -= fast: ch -= slow;

break;

case 32: // left. rotate anti-clockvise, move to left

bLocked = !bLocked;

if (bLocked) {

rx = w;

ry = h;

}

break;

}

draw();

e.preventDefault();

return false;

});