当前位置：文江博客文章教程详情

Snap.svg 功能强大的 SVG 动画内容 API 插件

发布于 2019-07-05 19:18:36 字数 4145 浏览 3020 评论 0

SVG 是一种很好的 Web 技术方案，可以用来创建互动，在任何大小的屏幕上都会很好看、与分辨率无关的矢量图形。而这里推荐的 Snap.svg 这个 JavaScript 可以让你像 jQuery 操作 DOM 一样操作 SVG 资源。

Snap.svg 是专为现代浏览器打造，支持剪裁，遮罩，纹理，渐变，分组等功能。凭借丰富的动画库和易于的事件处理，Snap.svg 可以帮助你轻松实现 SVG 功能。

距 Adobe Systems 34 亿美元收购 Macromedia 已经过去了8年的时间，后者的可伸缩矢量图形 SVG 格式以及 Flash 技术自然也属于这一部分。

而现在，鉴于浏览器开发人员渐渐地抛弃插件，该公司在周三于旧金山举办的 HTML5 开发者大会上，宣布了一个名叫 Snap.svg 的开源项目，旨在将类 Flash 的特性带到 Web 上。

Snap.svg 与 Adobe

Snap.svg 是一个 JavaScript 库，Web 开发人员可以创建带 SVG 功能的华丽网页。当然它会配合 Adobe 的一套新 Web 标准开发工具，比如 Edge。

Adobe 表示，"Snap.svg 是一个强大且直观的 SVG 动画内容操纵 API，支持屏蔽、裁剪、全梯度和组别等使得内容更具吸引力和交互性的功能"。

Snap.svg 的作者是 Adobe 公司的 Dmitry Baranovskiy，此前他创建了一个名叫 Raphael 的早期 SVG 项目。Snap.svg 可以在现代浏览器上工作。

SVG是什么？

SVG 是 Web 标准，Snap.svg 是一个用于在 HTML 前端生成 SVG 的 JavaScript 工具集，SVG 的工具集其实有很多，如 svg.js、raphaeljs，离开了这些工具，我们依然可以实现 SVG 作图，只不过要自己写 SVG XML。

Snap.svg 的缺陷

Snap.svg 里应用了一些 SVG 的高级特性，对于低端的浏览器比如 IE6 可能支持不是很好，但大部分的浏览器 Chrome、FireFox、Safari 或 IE 9+；如果看官考虑的是作图的兼容性，可以考虑http://raphaeljs.com/ ，这个 svg 工具的作者和 Snap.svg 是同一个。所以抉择就是一个舍得的问题，需自行权衡。

完整 HTML 示例

使用 Snap.svg 做 SVG 图，需要引用 2 个 JS 库，一个是 jQeury，另外一个当然是 Snap.svg，另外还要创建一个 SVG 的 HTML 元素。完整的示例如下：之后的元素绘制主要是 js 相关的代码，不包含完整的HTML：

<html>
    <head>
    <title>SVG Example</title>
    <script src='jquery.min.js'></script>
    <script src='js/snap.svg-min.js'></script>
    <script>
        $(document).ready(function(){
            var paper = Snap("#paper");
            paper.circle(30, 30, 20);
        });
    </script>
    </head>
    <body>
        <svg id='paper' style='width:500px;height:500px;' ></svg>
    </body>
</html>

基本元素

基本元素	作图方法	示例
圆形(circle)	paper.circle(x坐标, y坐标, 半径);	paper.circle(30, 30, 20);
椭圆(ellipse)	paper.ellipse(x, y, rx水平, ry垂直)	paper.ellipse(50, 50, 40, 20);
矩形(rect)	paper.rect(x,y,width,height,[rx],[ry]) rx和ry表示圆角	paper.rect(50, 50, 100, 200)
线(line)	paper.line(x1, y1, x2, y2)	paper.line(50, 50, 100, 200);
折线 (polyline)	paper.polyline(x1,y1,x2,y2,x3,y3...) 参数是数组	paper.polyline(10, 10, 100, 100);
多边形 (polygon)	paper.polygon(x1,y1,x2,y2,x3,y3...) 参数是数组	paper.polygon(22,10,30,81,57,25);
路径 (path)	paper.path(路径字符串)，下面会做说明	paper.path("M10 10L180 90")

关于路径(PATH)

PATH 是 SVG 的标准元素，PATH 是个神奇的元素

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath