使用 snap svg 的发光效果答案

【问题标题】：Glow effect using snap svg使用 snap svg 的发光效果
【发布时间】：2015-05-05 10:16:18
【问题描述】：

我正在尝试使用 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);
}

【问题讨论】：

你没有在任何地方调用 removeShadow 吗？也许我误解了你要做什么。
我尝试将其称为回调，但没有成功。

标签： javascript svg setinterval snap.svg glow

【解决方案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，我们可以访问任何元素，或者通过带有 Snap( someCssselector ) 的 css 选择器，如下所示。

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 或jsfiddle 效果略有不同

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

【讨论】：

如果我没记错的话，过滤器在 IE9 上不起作用？你确定这将适用于 IE9。因为我想要 IE9+ 支持。
可能不是，但在这种情况下，我不确定为什么要在问题中使用过滤器。
我一直在寻找像添加阴影这样的东西，这就是我从他们的文档中得到的。我们可以使用阴影来实现这一点吗？由于我误导了你，我接受你的回答。
问题是，据我所知，影子也只是一个过滤器。 IE 中的 CSS 也不支持 CSS 过滤器（据我所知）。我认为您可能需要查看 IE 过滤器？不过，它有点像一个雷区（也许有一些支持这个的库）。出于兴趣，忽略它是一个过滤器的事实，它在视觉上还可以吗？（我只是有另一个备用想法，如果可行，我可能会玩一下并发布）
我的意思是支持 IE9 的 box shadow 之类的东西……但是，我说服他们使用过滤器……谢谢……无论您的计划是什么，我都非常乐意看到。如果您有空，请发布小提琴。

【解决方案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 );

【讨论】：