使用 snap svg 的发光效果

Question

我正在尝试使用 snap SVG 添加发光效果。与 raphael.js 不同，我相信 Snap 默认不支持发光。但是，存在阴影效应。我尝试使用设置的间隔来应用阴影，以便它模仿发光的行为。但它并没有像预期的那样工作。我想让阴影淡入淡出 4-5 次，让它看起来像发光。在这里，我调用了影子，但无论将它添加到 setinterval 代码，它仍然存在。这是 JS FIDDLE

代码

var s = Snap("#main");
var thinkers = s.select("#lastImage");
var light = s.select("#look2");

// setinterval with counter
function setIntervalX(callback, delay, repetitions) {
    var x = 0;
    var intervalID = window.setInterval(function () {

        callback();

        if (++x === repetitions) {
            window.clearInterval(intervalID);
        }
    }, delay);
}
// function to add glow

function addShadow() {
    var f = s.filter(Snap.filter.shadow(2, 2, 10, "#ffffff"));
    light.attr({
        filter: f
    });
}
// remove glow/shadow
function removeShadow() {
    var k = s.filter(Snap.filter.shadow(0, 0, 0, "#ffffff"));
    light.attr({
        filter: k
    });
}
setTimeout(shadow, 500)

function shadow() {
    setIntervalX(addShadow, 1000, 4);
}

Answer 1

我将展示一种略微不同的滤镜方式，我认为它适用于任何滤镜，因为您可以通过普通的 svg 标记来指示它，然后打开更多滤镜，您可以上网找找用。

因此它允许您选择任何过滤器、任何组合并更改该过滤器的任何属性（您可以组合它们）。

假设您找到一些 svg 滤镜效果，用它创建一个字符串，例如...

var myFilter = '<filter id="glow" x="-30%" y="-30%" width="160%" height="160%"><feGaussianBlur id="gauss" stdDeviation="10 10" result="glow"/><feMerge><feMergeNode in="glow"/><feMergeNode in="glow"/><feMergeNode in="glow"/></feMerge></filter>';

使用 Snap 创建您的过滤器，（它将是一个片段，因此我们需要将其附加到论文中）... 如果我们给了它们一个 id，或者通过 css 选择器和 Snap( someCssselector ) ，我们可以访问任何元素，如下所示。

s.append( Snap.parse(myFilter) );
var glowFilter = Snap('#glow');
var gaussian = Snap('#gauss');

var t = s.rect(100,100,100,100).attr({ stroke: 'yellow', fill: 'orange', filter: glowFilter });

然后我们可以创建一个带有回调的动画函数，并改变任何过滤器的参数...

var onOff = 1;

function animGlow() {

    var start = 0; var end = 10;
    if( onOff ) { start = 10; end = 0 };
    onOff = onOff ? 0 : 1; 
    Snap.animate(start,end,function( amount ) {        
        gaussian.attr({ stdDeviation: amount + ' ' + amount });
    }, 800, mina.linear, animGlow);
}

animGlow();

jsfiddle or jsfiddle 效果略有不同

这将有望提供一些想法。如果您只想要 Snap 阴影，则有更简单的方法，但我只是想突出显示替代路线。

Answer 2

要 KISS 发光（不如 Raphael 发光）并添加阻力，试试这个：

var s = Snap("#svgTest");

//set up a shadow for hover over images shadow(dx, dy, 'color', opacity??? 3 seems darkest)
var glow = s.filter(Snap.filter.shadow(0, 2, 'yellow', .8));

//rect1 has glow
var rect1 = s.rect(10,10,50,50).attr({ fill: 'green', filter: glow });
//rect2 only has glow on hover
var rect2 = s.rect(100,100,50,50)
    .attr({ fill: 'green' })
    .hover(function() {
        //on hover..add fn glow above
        this.attr({filter : glow});
        },
        function() { 
            //on hover out, set filter to null..delete glow
            this.attr({filter : ''});
        }
    ); //end hover

// make all  dragable
var move = function(dx,dy) {
//console.log("dx: " +dx + " dy: " + dy);
        this.attr({
                    transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
                });
}

var start = function() {
        this.data('origTransform', this.transform().local );
}
var stop = function() { //do nothing
}
var selectAll = s.group(rect1, rect2);
selectAll.drag(move, start, stop );

使用 snap svg 的发光效果

Glow effect using snap svg

javascript

svg

setinterval

glow

snap.svg