Snap.filter.blur(x, [y])

返回模糊滤镜的SVG标记字符串。


参数

  • x 数值。表示水平模糊的大小。
  • y 数值。表示垂直模糊的大小。

如果y缺省,则y与x值相等。如果x缺省,使用默认值2.


返回值

字符串。表示滤镜。


使用

<svg id="svg" width="100" height="100"></svg>
var svg = Snap("#svg");
var f = svg.paper.filter(Snap.filter.blur()/* 使用默认的2像素模糊 */),
c = svg.paper.circle(50, 50, 40).attr({
    filter: f
});


Snap.filter.brightness(amount)

返回亮度滤镜的SVG标记字符串。


参数 * amount 数值。范围0~1, 表示滤镜数量。这里可以理解为亮度。0表示全黑,1表示没有变化,真实亮度。

如果y缺省,则y与x值相等。如果x缺省,使用默认值2.


返回值 字符串。表示滤镜。


使用

<svg id="svg" width="600" height="130"></svg>
var svg = Snap("#svg");
// 显示图片
var url = "http://ohutkvbbx.bkt.clouddn.com/chrome/a1b80fdedb2d3c9b27c250e990ef6699.png";
var image1 =  svg.paper.image(url, 0, 10, 195, 127);
var image2 =  svg.paper.image(url, 200, 10, 195, 127);
var image3 =  svg.paper.image(url, 400, 10, 195, 127);

// 亮度滤镜, 50%亮度
image2.attr({
    filter: svg.paper.filter(Snap.filter.brightness(0.5))
});
// 亮度滤镜, 150%亮度
image3.attr({
    filter: svg.paper.filter(Snap.filter.brightness(1.5))
});


Snap.filter.contrast(amount)

返回反差滤镜的SVG标记字符串。


参数

  • amount 数值。范围0~1, 表示滤镜数量。可以理解为明暗对比反差。0表示无反差,也就是全灰暗,1表示真实反差,图片等原本色彩。

返回值

字符串。表示滤镜。


使用

<svg id="svg" width="600" height="130"></svg>
var svg = Snap("#svg");
// 显示图片
var url = "http://ohutkvbbx.bkt.clouddn.com/chrome/a1b80fdedb2d3c9b27c250e990ef6699.png";
var image1 =  svg.paper.image(url, 0, 10, 195, 127);
var image2 =  svg.paper.image(url, 200, 10, 195, 127);
var image3 =  svg.paper.image(url, 400, 10, 195, 127);

// 反差滤镜, 50%
image2.attr({
    filter: svg.paper.filter(Snap.filter.contrast(0.5))
});
// 反差滤镜, 150%
image3.attr({
    filter: svg.paper.filter(Snap.filter.contrast(1.5))
});


Snap.filter.grayscale(amount)

返回灰度滤镜的SVG标记字符串。


参数

  • amount 数值。范围0~1, 表示滤镜数量。可以理解为黑白滤镜。0表示完全黑白,1表示真实色彩。

返回值

字符串。表示滤镜。


使用

<svg id="svg" width="600" height="130"></svg>
var svg = Snap("#svg");
// 显示图片
var url = "http://ohutkvbbx.bkt.clouddn.com/chrome/a1b80fdedb2d3c9b27c250e990ef6699.png";
var image1 =  svg.paper.image(url, 0, 10, 195, 127);
var image2 =  svg.paper.image(url, 200, 10, 195, 127);
var image3 =  svg.paper.image(url, 400, 10, 195, 127);

image2.attr({
    filter: svg.paper.filter(Snap.filter.grayscale(0.5))
});
image3.attr({
    filter: svg.paper.filter(Snap.filter.grayscale(1.5))
});


Snap.filter.hueRotate(angle)

返回色调旋转滤镜的SVG标记字符串。


参数

  • angle 数值。旋转的角度。0~360一个轮回。

返回值

字符串。表示滤镜。


使用

<svg id="svg" width="600" height="130"></svg>
var svg = Snap("#svg");
// 显示图片
var url = "http://ohutkvbbx.bkt.clouddn.com/chrome/a1b80fdedb2d3c9b27c250e990ef6699.png";
var image1 =  svg.paper.image(url, 0, 10, 195, 127);
var image2 =  svg.paper.image(url, 200, 10, 195, 127);
var image3 =  svg.paper.image(url, 400, 10, 195, 127);

image2.attr({
    filter: svg.paper.filter(Snap.filter.hueRotate(180))
});
image3.attr({
    filter: svg.paper.filter(Snap.filter.hueRotate(-30))
});


Snap.filter.invert(amount)

返回反相滤镜的SVG标记字符串。


参数

  • x 数值。范围0~1, 表示滤镜数量。所有颜色替换成相反的颜色。0表示没有任何反相,1表示完全反相, 0.5则50%灰度色。

返回值

字符串。表示滤镜。


使用

<svg id="svg" width="600" height="130"></svg>
var svg = Snap("#svg");
// 显示图片
var url = "http://ohutkvbbx.bkt.clouddn.com/chrome/a1b80fdedb2d3c9b27c250e990ef6699.png";
var image1 =  svg.paper.image(url, 0, 10, 195, 127);
var image2 =  svg.paper.image(url, 200, 10, 195, 127);
var image3 =  svg.paper.image(url, 400, 10, 195, 127);

image2.attr({
    filter: svg.paper.filter(Snap.filter.invert(1))
});
image3.attr({
    filter: svg.paper.filter(Snap.filter.invert(2))
});


Snap.filter.saturate(amount)

返回饱和度滤镜的SVG标记字符串。


参数

  • x 数值。范围0~1, 表示滤镜数量。0表示完全饱和,也就是真实色彩,1表示不饱和,近似黑白颜色效果。

返回值

字符串。表示滤镜。


使用

<svg id="svg" width="600" height="130"></svg>
var svg = Snap("#svg");
// 显示图片
var url = "http://ohutkvbbx.bkt.clouddn.com/chrome/a1b80fdedb2d3c9b27c250e990ef6699.png";
var image1 =  svg.paper.image(url, 0, 10, 195, 127);
var image2 =  svg.paper.image(url, 200, 10, 195, 127);
var image3 =  svg.paper.image(url, 400, 10, 195, 127);

image2.attr({
    filter: svg.paper.filter(Snap.filter.saturate(0.5))
});
image3.attr({
    filter: svg.paper.filter(Snap.filter.saturate(1))
});


Snap.filter.sepia(amount)

返回棕褐色滤镜的SVG标记字符串。


参数

  • amount 数值。范围0~1, 表示滤镜数量。可以理解为怀旧效果滤镜。0为真实色彩,1表示完全棕褐色效果。

返回值

字符串。表示滤镜。


使用

<svg id="svg" width="600" height="130"></svg>
var svg = Snap("#svg");
// 显示图片
var url = "http://ohutkvbbx.bkt.clouddn.com/chrome/a1b80fdedb2d3c9b27c250e990ef6699.png";
var image1 =  svg.paper.image(url, 0, 10, 195, 127);
var image2 =  svg.paper.image(url, 200, 10, 195, 127);
var image3 =  svg.paper.image(url, 400, 10, 195, 127);

image2.attr({
    filter: svg.paper.filter(Snap.filter.sepia(0.5))
});
image3.attr({
    filter: svg.paper.filter(Snap.filter.sepia(1))
});


Snap.filter.shadow(dx, dy, [blur], [color])

返回阴影滤镜的SVG标记字符串。


参数

  • dx 数值。水平偏移投影大小,单位像素。
  • dy 数值。垂直偏移投影大小,单位像素。
  • blur 数值。模糊数量。默认大小为4像素。
  • color 字符串。投影的颜色值。默认颜色为黑色。
  • opacity 数值。0..1的透明度。默认为1。

或者

  • dx 数值。水平偏移投影大小,单位像素。
  • dy 数值。垂直偏移投影大小,单位像素。
  • color 字符串。投影的颜色值。默认颜色为黑色。
  • opacity 数值。0..1的透明度。默认为1。

或者

  • dx 数值。水平偏移投影大小,单位像素。
  • dy 数值。垂直偏移投影大小,单位像素。
  • opacity 数值。0..1的透明度。默认为1。

如果dy缺省,则使用dx大小;如dx缺省,则dx使用默认数值2.


返回值

字符串。表示滤镜。


使用

<svg id="svg" width="100" height="100"></svg>
var svg = Snap("#svg");
var f = svg.paper.filter(Snap.filter.shadow(0, 5,3, '#ff0',0.5)),
c = svg.paper.circle(50, 50, 30).attr({
    fill: "red",
    filter: f
});