snap.svg.js
在本教程中，我们将介绍Snap.svg，这是一个JavaScript库，可帮助动画化和操纵SVG内容。 为了演示一些可用功能，我们将对SVG眼睛进行动画处理。
什么是Snap.svg？
Snap.svg是一个JavaScript库，可轻松为现代浏览器创建和处理SVG图形。 它是德米特里·巴拉诺夫斯基 （ Dmitry Baranovskiy ）的拉斐尔（Raphaël ）的继任者； 用于SVG的最受欢迎的Javascript库。
拉斐尔
Raphäel.js是一个很棒的库。 它于2008年发布，最大的赢家是从IE 5.5开始对浏览器的支持。 但是，支持如此多的浏览器是有限的，这意味着它无法实现最新的开发，而是依赖于SVG功能的公共子集。
不久之后， Raphäel.js社区分为两个部分，一个小组依靠它来实现跨浏览器的兼容性，另一个小组利用它来创建SVG。 后一组要求进行更改以支持Raphäel.js无法处理的更多SVG功能。
因此， Snap.svg是完全由Adobe Web平台团队的Dmitry Baranovskiy完全从头编写的，以便更轻松地使用SVG并使用SVG可以提供的最新功能。 诸如遮罩，图案，渐变，组，动画等功能。
您可以使用Snap.svg做什么？
看看他们的API文档 ，您将看到mask ， group ， gradient ， filter ， animate和pattern等功能 ，所有这些功能都可以应用于SVG。
Snap.svg将帮助您生成图形，但它也可以与现有SVG一起使用。 这意味着您的SVG内容不一定必须使用Snap.svg创建，您还可以自由操作使用Adobe Illustrator，Inkscape或Sketch之类的工具创建的图形。
Snap.svg入门
下载
首先，您需要下载Snap.svg 。 完成此操作后，您将在存档中找到以下内容：
- 演示 -这里有一些示例，您也可以在其网站的“ 演示”部分中找到
- DIST -这是微细化以及压缩（发展）snap.svg脚本
- 文档 -在这里你会发现API文档 ，其也可在snapsvg.io
- src-这些是组成Snap.svg的组件，工具和插件，例如动画，纸张，运行Grunt任务等。
- 测试 -此目录包含Snap.svg的单元测试
建立一个项目
下载了Snap.svg资源后，开始一个新的Web项目，其中需要包括：
- index.html-主HTML文件
- js / snap.svg.js -snap.svg插件
- js / main.js-我们的主要工作空间
创建一个HTML模板，并在页面上的某处引用“ scripts / snap.svg.js”和“ scripts / main.js”脚本。
之后，在内放置一个容器并为其指定一个ID。 您应该有一些像这样的东西：
Introducing Snap.svg
使用SVG
现在让我们直接进入编码。 要继续学习，您需要一些基本JavaScript知识和理解，但这并没有太大关系，因为我们在本教程中不会做得太深。
首先，我们将初始化Snap，指向刚刚创建的svg ，并将其分配给变量。 在我们的例子中，变量称为s
var s = Snap("#svg"); 从现在开始，在s变量中，我们将可以访问所有Snap.svg方法。 例如，假设我们要创建一个圆形或矩形。
- Circle可以使用三个参数x ， y和radius （ 请检查Circle API ）
- 矩形可以采用六个参数： x ， y ， width ， height ， 水平半径和垂直半径 （ 请参见Rect API ）
- 椭圆可以采用四个参数： x，y，水平半径和垂直半径 （ 请检查ellipse API ）
// Circle with 80px radius
var circle = s.circle(90,120,80);
// Square with 160px side width
var square = s.rect(210,40,160,160);
// Ellipse with 80px vertical radius and 50px horizontal radius
var ellipse = s.ellipse(460,120,50,80);上面的代码将产生以下结果：
从所附的屏幕截图中可以看到，默认情况下，形状的填充颜色为#000 （黑色），没有任何其他样式。 让我们与它们进行交互，并添加其他一些样式属性，例如填充颜色，填充不透明度，笔触颜色，笔触宽度，笔触不透明度。 您可以检查SVG属性以了解更多详细信息。
circle.attr({
fill: 'coral',
stroke: 'coral',
strokeOpacity: .3,
strokeWidth: 10
});
square.attr({
fill: 'lightblue',
stroke: 'lightblue',
strokeOpacity: .3,
strokeWidth: 10
});
ellipse.attr({
fill: 'mediumturquoise',
stroke: 'mediumturquoise',
strokeOpacity: .2,
strokeWidth: 10
});这些属性使我们的svg形状更漂亮！
进一步的SVG操作
让我们以我们的例子为例，超越基础。
分组形状
Snap.svg使用了一种强大的武器，称为group ，顾名思义，它可以将向量分组在一起，使它们成为一种形状。 通过将形状添加为列表，可以根据需要对形状进行分组。
让我们创建两个圆圈，将它们分组并降低每个圆圈的填充量，以更清楚地可视化正在发生的事情。
var circle_1 = s.circle(200, 200, 140);
var circle_2 = s.circle(150, 200, 140);
var circles = s.group(circle_1, circle_2);
circles.attr({
fill: 'coral',
fillOpacity: .6
});用其他形状遮罩形状
现在，我们要使用已经制作的分组元素来创建一个假想的眼睛。 我们可以使用mask这样做。 首先，我们需要创建一个额外的椭圆并将其放置在组的中间。
var circle_1 = s.circle(300, 200, 140);
var circle_2 = s.circle(250, 200, 140);
var circles = s.group(circle_1, circle_2);
var ellipse = s.ellipse(275, 220, 170, 90);
circles.attr({
fill: 'coral',
fillOpacity: .6,
});
ellipse.attr({
opacity: .4
});
现在我们需要用椭圆掩盖圆，为椭圆添加不同的填充颜色：
circles.attr({
fill: 'coral',
fillOpacity: .6,
mask: ellipse
});
ellipse.attr({
fill: '#fff',
opacity: .8
});动画形状
继续我们的示例，我们可以通过添加动画方法使此眨眼。 为了给刚创建的椭圆设置动画，我们将垂直半径从1修改为90 （这是当前值），然后再次返回。
创建动画并将其包装在名为blink的函数中。
function blink(){
ellipse.animate({ry:1}, 220, function(){
ellipse.animate({ry: 90}, 300);
});
}; 这说明我们将以不同的时间从ry: 90到ry: 1和从ry: 90到ry: 1进行动画处理。
现在创建一个setInterval来调用blink 方法每三秒钟一次，以创建闪烁效果。
setInterval(blink, 3000);最终代码应如下所示：
var circle_1 = s.circle(300, 200, 140);
var circle_2 = s.circle(250, 200, 140);
// Group circles together
var circles = s.group(circle_1, circle_2);
var ellipse = s.ellipse(275, 220, 170, 90);
// Add fill color and opacity to circle and apply
// the mask
circles.attr({
fill: 'coral',
fillOpacity: .6,
mask: ellipse
});
ellipse.attr({
fill: '#fff',
opacity: .8
});
// Create a blink effect by modifying the rx value
// for ellipse from 90px to 1px and backwards
function blink(){
ellipse.animate({ry:1}, 220, function(){
ellipse.animate({ry: 90}, 300);
});
};
// Recall blink method once every 3 seconds
setInterval(blink, 3000);浏览器支持
如前所述，现代浏览器支持以下功能： IE9 + ，Safari，Chrome，Firefox和Opera。
开源和免费
Snap.svg在Apache 2许可下可用，这意味着它是完全开源的，并且完全免费。
结论
Snap.svg降低了一些令人惊叹的SVG操作的障碍。 希望您喜欢它，并激发您对SVG的进一步研究！
翻译自: https://webdesign.tutsplus.com/articles/how-to-manipulate-and-animate-svg-with-snapsvg--cms-21323
snap.svg.js