raphael.js 给元素 hover 添加glow() 外发光

 用raphael.js 给 svg画布里面添加个元素，嗯就圓好了，男人一般都喜欢圆形的东西，比如xx ,  xxx , 还有xxx

 

$(document).ready(function() {

    var paper = Raphael(0,0,360,360);

    var myCircle = paper.circle(180,180,30).attr('stroke','#FFF');

    myCircle.hover(function() {

        myCircle.glow().attr('stroke','#FFF');

    }, function() {

        // removing the glow from the circle??

    });

});

　　

raphael.js 官网的文档是在是羞涩难懂，它的文档里面对glow()的用法如下：

 Element.glow([glow])⚓➭



Return set of elements that create glow-like effect around given element. See Paper.set.



Note: Glow is not connected to the element. If you change element attributes it won’t adjust itself.



Parameters

glowobject

parameters object with all properties optional:

{

widthnumber //size of the glow, default is 10

fillboolean //will it be filled, default is false

opacitynumber //opacity, default is 0.5

offsetxnumber //horizontal offset, default is 0

offsetynumber //vertical offset, default is 0

colorstring //glow colour, default is black

}

Returns:objectPaper.set of elements that represents glow

　　

 嗯，我也依然还是不晓得要怎么在mouseout的时候如何把这个glow()的效果给remove掉。

 

 后偶然发现一个奇葩的解决方案。

function init(){

// Creates canvas 320 × 200 at 10, 50

var paper = Raphael(10, 50, 320, 200);



// Creates circle at x = 50, y = 40, with radius 10

var circle = paper.circle(50, 40, 10);

// Sets the fill attribute of the circle to red (#f00)

circle.attr("fill", "#f00");



// Sets the stroke attribute of the circle to white

circle.attr("stroke", "#fff");



circle.hover(

// When the mouse comes over the object //

// Stock the created "glow" object in myCircle.g

function() {

this.g = this.glow({color: "#FFF", width: 100});

},

// When the mouse goes away //

// this.g was already created. Destroy it!

function() {

this.g.remove();

});

}

　　

 -----------------------------------------节操分界线---------------------------------------------------------------

 

mouseover --> this.g = this.glow({color: "#FFF", width: 100});



mouseout  --> this.g.remove();

妹的，太奇葩了有么有！看文档的人谁能想到是这么用的我陪睡啊。

居然你会发下this.g　的这个g，居然是任意的，只要不是"glow" 把本来的glow给覆盖了就可以，你甚至可以

mouseover --> this.xxoo = this.glow({color: "#FFF", width: 100});



mouseout  --> this.xxoo.remove();

　　

这个，太没节操了！