在当今时代，SVG是最流行的和正在被众多的设计人员和开发人员使用，创建支持视网膜和响应式的网页设计。绘制SVG不是一个艰巨的任务，因为大量的 JavaScript 库可与 SVG 图像搭配使用。这些JS库帮助设计师和开发人员可以轻松地为他们的项目和Web应用程序创建创新和逼真的图形。
您可能感兴趣的相关文章
1. Textures.js
Textures.js makes it easy to add SVG patterns for improved data visualizations. It includes a huge variety of textures, including lines, circles, paths, and even custom patterns.
2. Circulus.svg
Circulus.svg is a circular menu generator, that lets you generate an SVG menu. It offers two different styles, with full or half circles, and various options for styling.
deSVG makes it simple to remove inline SVG bloat from your HTML. It allows you to style your SVGs with CSS, and keeps your SVGs accessible even without JavaScript.
4. SVG Morpheus
SVG Morpheus is a JavaScript library that lets you create SVG icons that morph into one another. It&s easy to use and works with Material Design&s Delightful Details transitions.
Vivus is a JavaScript class for animating SVGs with no dependencies necessary. It offers asynchronous animations, delayed animations, and line-by-line animations.
6. Walkway.js
Walkway.js is an easy way to animate your simple SVG elements. It includes built-in easing functions, and also has options for selector and duration.
7. ZorroSVG
ZorroSVG makes it easy to add masks to your SVG images. It makes it possible to create images with PNG-like transparency while maintaining small file sizes.
8. Raphael
Rapha&l is a JavaScript library that facilitates using & creating vector graphics in websites. It uses SVG & VML for creating graphics. As every graphic generated is a DOM object, you can manipulate them via JavaScript.
9. Snap.SVG
Snap is an impressive + free JavaScript library that eases working with SVG and focuses only to modern browser support. It is created by the developer of the most popular SVG library, Rapha&l, and itsupports features like masking, clipping, patterns, full gradients, groups, and more.
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3&s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
11. Path.js
Paths.js is a JavaScript library for generating SVG paths that can then be used along with a template engine like Mustache or Handlebars for displaying those SVG shapes in the browser. It offers three APIs, of increasing abstraction.
12. SVG.js
SVG.js is a JavaScript library for working (manipulating and animating) with SVG without any complexity. The library is standalone, very lightweight in size (5kb gzipped) and has lots of features. There are built-in methods for creating shapes (rectangle, circle, polygon, etc.) or defining images. They can all be animated with size, position, color or any other properties and be interacted with standard JavaScript events.
13. Jim Knopf
Jim Knopf is a JavaScript library for creating SVG-powered knobs. The library doesn&t require any JS frameworks and it comes with various built-in knob types. Knobs created can be scaled completely (thanks to SVG) and their designs can be customized with CSS. Also, they can be controlled with mouse, mousewheel, keyboard or touchpad and options exist for setting the min/max values, starting points and the angles allowed.
14. Seen.js
Seen.js renders 3D scenes into SVG or HTML5 Canvas. Seen.js contains a simple abstraction on top of the graphics capabilities of SVG and HTML5 Canvas elements. All of the other components of this library are agnostic to the type of context it will be rendered in.
15. Bonsai
BonsaiJS is a lightweight graphics library with an intuitive graphics API and an SVG renderer. The main features include Architecturally separated runner and renderer, iFrame, Worker and Node running contexts, Shapes, Paths, Assets (Videos, Images, Fonts, SubMovies), Keyframe and regular animation (easing functions too), Shape/path morphing, and much more&
您可能感兴趣的相关文章
英文链接：
编译来源：
阅读(...) 评论()利用SVG和CSS3来实现一个炫酷的边框动画-真格学网-IT技术综合网站
利用SVG和CSS3来实现一个炫酷的边框动画
来源： &责任编辑:小易 &时间: 8:07:52
如何在HTML5中使用SVG答：SVG即ScalableVectorGraphics，是一种用来绘制矢量图的HTML5标签。你只需定义好XML属性，就能获得一致的图像元素。使用SVG之前先将标签加入到HTMLbody中。就像其他的HTML标签一样，你可以为SVG标签为之添加ID属性。也可以为之添加css样...如何在网页中使用SVG答：可以参照菜鸟教程中的html5相关学习资料。具体网址如下：/html/html5-svg.html之前我就是从这个教程上学的，希望能够帮助到你。如何在HTML5中使用SVG答：在HTML5中使用SVG12月12日北京OSC源创会――开源技术的年终盛典»SVG即ScalableVectorGraphics，是一种用来绘制矢量图的HTML5标签。你只需定义好XML属性，就能获得一致的图像元素。使用SVG之前先将标签加入到HTMLbody中。就像其...利用SVG和CSS3来实现一个炫酷的边框动画(图1)利用SVG和CSS3来实现一个炫酷的边框动画(图2)利用SVG和CSS3来实现一个炫酷的边框动画(图3)利用SVG和CSS3来实现一个炫酷的边框动画(图4)利用SVG和CSS3来实现一个炫酷的边框动画(图5)利用SVG和CSS3来实现一个炫酷的边框动画(图6)
如何在HTML5中使用SVG答：SVG即ScalableVectorGraphics，是一种用来绘制矢量图的HTML5标签。你只需定义好XML属性，就能获得一致的图像元素。使用SVG之前先将标签加入到。防恶意抓取，请查看原文，，真格学网提供内容。今天我们来探索一下上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生&&网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS渐变来完成。注意，这个技术还是实验性的。
怎么将svg文件引入html问：我怎么将已经生成的svg文件test1.svg位置D:\test引入到我写好的jsp文...答：三种方式：使用标签：这个是官方推荐的用法，但是这个官方是Adobe官方，不是W3C官方，现在的HTML标准里还没有这个标签。用法是：pluginspage是插件下载地址。使用标签：这个是W3C的规范，在HTML标准里有这个标签，这个标签里面不能使用js...。防恶意抓取，请查看原文，，真格学网提供内容。首先，让我们来看看基本的概念，然后我们会朝着这个方向努力。
如何在HTML中显示SVG？答：SVG文件可通过以下标签嵌入HTML文档：、或者详解：1、使用标签2、使用标签3、使用标签。防恶意抓取，请查看原文，，真格学网提供内容。请注意，我们将在SVG上使用CSS过渡，可能无法得到所有浏览器的支持。
如何在网页中使用SVG答：SVG即ScalableVectorGraphics，是一种用来绘制矢量图的HTML5标签。你只需定义好XML属性，就能获得一致的图像元素。使用SVG之前先将标签加入到HTM。防恶意抓取，请查看原文，，真格学网提供内容。乍眼一看可能不明白这个效果是怎么完成的。我们先仔细看看上面的边就会发现，白色的边的宽度不断从右边往左边延伸，而一条稍微延时的边紧跟着一起移动。每条边都有这样的做法。看起来就像上面的边经过拐角移动到了左边，并以此类推。
怎么在网页中使用svg答：在网页中使用svg有以下三种方式1.svg归根结底来说是一种图像格式，虽然有别于jpeg，gif，png等位图图像格式，所以在网页中能嵌入图像的地方都可以嵌入svg，例如将svg文件设置为元素的src属性，或者是给任意的元素设置背景图像，或者是设置为CS...。防恶意抓取，请查看原文，，真格学网提供内容。不用SVG也能完成这样的效果，甚至只用伪元素。但是我们想探索一下怎样用CSS而不是JavaScript来控制SVG。
svg文件是什么/怎么打开答：svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言，使用svg格式我们可以直接用代码来描绘图像，可以用任何文字处理工具打开svg图像，通。防恶意抓取，请查看原文，，真格学网提供内容。现在，来思考一下要怎么创建出这样的效果。我们可以改变矩形的troke-dashoffset或者直接画线。我们尝试不用JavaScript的解决方案。我们发现，CSS过渡stroke-dashoffset 和 stroke-dasharray的值会触发很多BUG。所以我们要尝试不同的解决方案，利用线条和它们的动画，这在CSS里很容易理解和实现。这也给我们更多机会去探索不同的动画效果。
有了css3之后,还需要canvas还有svg吗?1、CSS3在DOM节点多的情况下效率严重下降。2、CSS3的旋转比canvas(2d)要好。3、CSS3的文字渲染比canvas好。4、canvas可以在更底层操作。5、canvas支持web...。防恶意抓取，请查看原文，，真格学网提供内容。我们将要使用的线的特别之处是，它们在这个动画里将有三种状态。它们是方盒边长的三倍，其中中间一截是与边等长的间隙。我们将通过设置stroke-dashoffset的值来实现与方盒的边等长。现在，这个动画实现的关键在于线的位置转换：利用html5和css3打造一款创意404页面&实现的代码html代码:&代码如下:&svgclass=&me404&viewbox=&&&&pathid=&cloud&class=&st0&...。防恶意抓取，请查看原文，，真格学网提供内容。
SVG与方盒大小一致，就不会看到超出虚线的部分。
网页设计新趋势:CSS3、字体以及图标利用CSS可以实现多设备较为一致的体验效果,圆角的优雅也无可替代!图层阴影CSS3...然后选择PNG。PNG的缩小性能极佳,但是放大的话,可能会出现像素块和模糊。防恶意抓取，请查看原文，，真格学网提供内容。我们先完成第一条线：
CSS Code复制内容到剪贴板
&&&&&svg&width=&200&&height=&200&& &&
&&&&&&&&&line&x1=&0&&y1=&0&&x2=&600&&y2=&0&&/& &&
&&&&&/svg& &&
献给网页设计师的HTML5/CSS3/JS便捷工具充分利用了background-attachment的CSS属性来创造固定背景的效果。使用SVG创造...隐藏次要内容。圆形弹出式导航菜单使用SASS和CSS3营造出来的过度、变换的动画...。防恶意抓取，请查看原文，，真格学网提供内容。这个div长宽20px，和SVG一样。把SVG位置设为absolute，线宽度为10，stroke-dasharray为200。
CSS Code复制内容到剪贴板
&&&&width:&200px; &&
&&&&height:&200px; &&
&&&&position:&relative; &&
&&&&overflow:&hidden; &&
&&&&background:&#ddd; &&
&&&&position:&absolute; &&
&&&&top:&0; &&
&&&&left:&0; &&
svg&line&{ &&
&&&&stroke-width:&10; &&
&&&&stroke:� &&
&&&&fill:&none; &&
&&&&stroke-dasharray:&200; &&
&&&&-webkit-transition:&-webkit-transform&.6s&ease- &&
&&&&transition:&transform&.6s&ease- &&
div:hover&svg&line&{ &&
&&&&-webkit-transform:&translateX(-400px); &&
&&&&transform:&translateX(-400px); &&
CSS3用@font-face实现自定义英文字体&现在CSS3已经很流行了。传说中的CSS3基本上什么都可以,那么CSS3中可不...支持这种字体的浏览器有【IE4+】;(5)SVG(.svg)格式:.svg字体是基于SVG字体渲...。防恶意抓取，请查看原文，，真格学网提供内容。当数鼠标悬浮在div上时，线也有一个过渡。我们要把线移动到它的三分之二处，所以要在x轴上移动到-400px处，你可以看看。因为translation不能在这里用百分比做单位，所以用px。
CSS3是否能够成为未来Web动画的主流但是相对的,小型CSS3动画的运行效率远远比flash和gif高的多。我们或者说CSS3只...高清化离我们越来越近,各种各样的HTML5应用和游戏泉涌而出,开。防恶意抓取，请查看原文，，真格学网提供内容。接着添加其余三条线，gif效果：请问大神关于CSS3里面@font-face的问题!一、TureTpe(.ttf)格式:.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他...支持这种字体的浏览器有【IE4。防恶意抓取，请查看原文，，真格学网提供内容。
我们需要实现以下效果：线的第一部分移出方盒后，旁边的线的最后一部分移动进来，，这将传进直线在转角处转弯的假象，
主流浏览器CSS3和HTML5兼容性大比拼对CSS3和HTML5各种特性支持情况的详细清单。各大主流浏览器对CSS3和HTM...图形和内嵌内容这应该是HTML5最令人期待的东西了,内置画布,视频,音。防恶意抓取，请查看原文，，真格学网提供内容。来看看坐标系的定义：正式的html5+css3是不是要彻底抛弃div,id,class?SVG、canvas、WEBGL、webworker。socket通信相关的:基于浏览器客户端的websocket。多媒体相关的:v。防恶意抓取，请查看原文，，真格学网提供内容。
左边的线的坐标是(0,200) 到 (0,-400)，底部的是(200,200) 到 (-400,200)，右边的是right one (200,0) 到 (200,600)：
snap.svg和createjs哪个好用推荐使用IE9,因为:标准互通IE9将更多的支持HTML5、CSS3、JS、SVG矢量图等互联网浏览通用标准,这样做的好处是网页不需要专门针对IE来进行测试也。防恶意抓取，请查看原文，，真格学网提供内容。给每条线加上不同的hover效果：
CSS Code复制内容到剪贴板
div:hover&svg&line.top&{ &&
&&-webkit-transform:&translateX(-400px); &&
&&transform:&translateX(-400px); &&
div:hover&svg&line.bottombottom&{ &&
&&-webkit-transform:&translateX(400px); &&
&&transform:&translateX(400px); &&
div:hover&svg&line.left&{ &&
&&-webkit-transform:&translateY(400px); &&
&&transform:&translateY(400px); &&
div:hover&svg&line.rightright&{ &&
&&-webkit-transform:&translateY(-400px); &&
&&transform:&translateY(-400px); &&
。防恶意抓取，请查看原文，，真格学网提供内容。。
不管是篮球还是拳击比赛，每个人都喜欢看双方势均力敌的战斗，最令人疯狂的情况莫过于你所支持的队伍最终获得了胜利。虽然我们可能要过几年才能给这场比赛下一个真正的结论，显然经过重新设计的2017款本田CR-。防恶意抓取，请查看原文，，真格学网提供内容。现在方盒大小改为300 x 460，再给它添加一些内容：
CSS Code复制内容到剪贴板
&div&class=&box&& &&
&&&&&svg&xmlns=&http://www.w3.org/2000/svg&&width=&100%&&height=&100%&& &&
&&&&&&&&&line&class=&top&&x1=&0&&y1=&0&&x2=&900&&y2=&0&/& &&
&&&&&&&&&line&class=&left&&x1=&0&&y1=&460&&x2=&0&&y2=&-920&/& &&
&&&&&&&&&line&class=&bottom&&x1=&300&&y1=&460&&x2=&-600&&y2=&460&/& &&
&&&&&&&&&line&class=&right&&x1=&300&&y1=&0&&x2=&300&&y2=&1380&/& &&
&&&&&/svg& &&
&&&&&h3&D&/h3& &&
&&&&&span&2012&/span& &&
&&&&&span&Broccoli,&Asparagus,&Curry&/span& &&
欢迎关注：魅力西藏、十年藏漂与您话说西藏西藏的绿松石和蜜蜡那么大。是真的吗？作为一个在西藏待了十年的文玩老手，我想说，拉萨的首饰很多店铺都是真的。毕竟一年十几万二十万的房租谁也不想自己砸自己招牌。但是西藏的蜜蜡价格是按照克算的，打个比方。十克内是一个价格，11-19.9克又是一个价格，以此内推。需要注意的是，蜜蜡并没有升值空间，投资爱好的话，推荐翡翠和玉器，玉器越老越值钱。蜜蜡虽然老蜜蜡值钱，可是这玩意好买不好卖。西藏的蜜蜡玉器大多来自广东地区，绿松石产地比较多，看品相。质量和价格也是参差不齐。需要注意的是，现在合成蜜蜡比较多，要注意鉴别。不要花大价钱买个高端塑料这就很尴尬了。小提示：真蜜蜡用。防恶意抓取，请查看原文，，真格学网提供内容。为了实现Carl Philipe Brenner的网站上的效果，我们还要添加颜色过渡效果、盒子阴影等：
CSS Code复制内容到剪贴板
&&&&width:&300px; &&
&&&&height:&460px; &&
&&&&position:&relative; &&
&&&&background:&rgba(255,255,255,1); &&
&&&&display:&inline-block; &&
&&&&margin:&0&10px; &&
&&&&cursor:&pointer; &&
&&&&color:&#2c3e50; &&
&&&&box-shadow:&inset&0&0&0&3px&#2c3e50; &&
&&&&-webkit-transition:&background&0.4s&0.5s; &&
&&&&transition:&background&0.4s&0.5s; &&
.box:hover&{ &&
&&&&background:&rgba(255,255,255,0); &&
&&&&-webkit-transition-delay:&0s; &&
&&&&transition-delay:&0s; &&
兔子肠胃很脆弱的，看你家兔子有多大，一般健康的兔子都会吃东西和喝水的。兔子三个月以前不能喂蔬菜，不然很容易拉肚子而死。三个月后也不能把蔬菜水果当主食。而且兔子当宠物养的话要健康喂养，我头条号里有篇关于养兔子的文章你可以去看看，如果有什么问题也可以问我。。防恶意抓取，请查看原文，，真格学网提供内容。给文字加上样式：
CSS Code复制内容到剪贴板
.box&h3&{ &&
&&&&font-family:&&Ruthie&,&cursive; &&
&&&&font-size:&180px; &&
&&&&line-height:&370px; &&
&&&&margin:&0; &&
&&&&font-weight:&400; &&
&&&&width:&100%; &&
.box&span&{ &&
&&&&display:█ &&
&&&&font-weight:&400; &&
&&&&text-transform:&uppercase; &&
&&&&letter-spacing:&1px; &&
&&&&font-size:&13px; &&
&&&&padding:&5px; &&
.box&h3, &&
.box&span&{ &&
&&&&-webkit-transition:&color&0.4s&0.5s; &&
&&&&transition:&color&0.4s&0.5s; &&
.box:hover&h3, &&
.box:hover&span&{ &&
&&&&color:&#fff; &&
&&&&-webkit-transition-delay:&0s; &&
&&&&transition-delay:&0s; &&
能够自我调节的人就不会持续抑郁了“不要戴症”，因为这只是种无法摆脱的情绪障碍。以往多次讲过有些性格容易发生心理障碍，与遗传有关发育后定了型，一生也无法攻变。但外因是发生抑郁不可缺少的另一个因素，这孩子从小单H家庭，有没有想过父母离异前发生在家庭内孩子幼小心灵无法承受的痛苦、焦虑、压抑和卸嗌倌辍Ｗ运降母改该俏∽约旱摹靶腋！蓖倭撕⒆拥囊簧Ｋ晕宜蹈改咐胍焓艿缴撕ψ畲蟮氖呛⒆樱唤黾抑小⒀！⑸缁嶂卸加小Ｏ执缁嵊忠桓龌巍安蝗梦业暮⒆邮湓谄鹋芟呱稀贝友！⒗鲜Α⒓页と骸卑延锥暗礁咧械暮⒆颖频揭惶跛篮腥ィ逃闪瞬盗此参薹ê炊夺了孩子自天性，甚至人性。（他们唯一开心。防恶意抓取，请查看原文，，真格学网提供内容。给SVG和线条添加样式：
CSS Code复制内容到剪贴板
.box&svg&{ &&
&&&&position:&absolute; &&
&&&&top:&0; &&
&&&&left:&0; &&
.box&svg&line&{ &&
&&&&stroke-width:&3; &&
&&&&stroke:&#ecf0f1; &&
&&&&fill:&none; &&
&&&&-webkit-transition:&all&.8s&ease-in- &&
&&&&transition:&all&.8s&ease-in- &&
??\"黄芥末\"才是真芥末！芥末是由成熟的芥菜（Brassicajuncea）的种子碾磨成的粉状调料，一般呈黄色。就是我们吃热狗搭配的那一条黄黄的膏状物体。其实中国早在周代起宫廷里就开始食用这种芥末酱了绿色的wasabi，它的真名叫山葵?现在来看看山葵。山葵（Wasabiajaponica），从它的拉丁名里看出点什么来了吗？没错，日本料理中配寿司和生鱼片的绿色瓦沙比（wasabi）其实是山葵酱！山葵酱（wasabi）是由山葵根磨成细泥状制成的，它和由芥菜种子磨成的芥末酱（mustard）压根不是一回事儿，只是气味和味道相似然而，你平时吃到的也多半不是山葵现在你知道了，此芥末酱非彼芥末酱。再告。防恶意抓取，请查看原文，，真格学网提供内容。给线的过渡加上延时：
CSS Code复制内容到剪贴板
.box:hover&svg&line&{ &&
&&&&-webkit-transition-delay:&0.1s; &&
&&&&transition-delay:&0.1s; &&
在职场中，办公室恋情通常都是一个雷区，许多人是只敢远观，因为一旦分手了会出现很多的麻烦事。恋情结束还要在同一家公司里，抬头不见低头见，难免会感到很尴尬，还得遭受其他同事的闲言碎语，遇到这种情况应该如何应对？微笑面对分手，相遇时给一个简单微笑或点头示意就好，大方流露出的亲切笑容会减少彼此间的尴尬，做不成恋人，也没必要做敌人。恋情结束了通常都会影响心情，但在工作中要公私分明，尽力完成事业上的合作，不但可以体现自己的工作态度，还能堵上别人的流言蜚语！作为有人生历练的成年人，办公室恋情分手其实也没那么可怕，完全没必要用辞职来逃避，可以调整心态，以平淡的眼光看待！查看更多文章视频,请关注我吧,瞄。防恶意抓取，请查看原文，，真格学网提供内容。之前我们定义的stroke-dasharray只有一个值，但是现在要因尺寸变化而修改
CSS Code复制内容到剪贴板
.box&svg&line.top, &&
.box&svg&line.bottombottom&{ &&
&&&&stroke-dasharray:&330&240;& &&
.box&svg&line.left, &&
.box&svg&line.rightright&{ &&
&&&&stroke-dasharray:&490&400; &&
这个问题分两段回答：1、支付宝上的余额宝理财是真的吗？余额宝是蚂蚁金服旗下的余额增值服务和活期资金管理服务产品，2013年6月推出。特点是：”获得收益的同时，可随时消费支付，且没有手续费，比银行定期理财产品更加方便灵活，堪称“懒人理财神器”。简单来说，天弘基金是余额宝的基金管理人，也就是说，你购买的实际上天弘基金的货币基金。它本质上和你在银行购买的理财产品性质一样。只不过，支付宝作为这项理财产品的购买入口，所以真实度毋庸置疑。2、钱放进去安全吗？只要是投资就会是风险，余额宝是货币基金的一种，而货币基金主要用于投资国债、银行存款等有价证券。所以，购买余额宝并不等于将资金作为存款存放在银行，不保证。防恶意抓取，请查看原文，，真格学网提供内容。如果你尝试这些值，你就能看到这些线条不同的显示效果。
安卓内核升级是个复杂的问题，Google发布新版本之后，厂商还要针对不同平台、设备适配，既要看设备驱动，也要看厂商开发能力和意愿。魅族现在已经开始全面内测安卓7.0了(官方一直叫AndroidN)，M。防恶意抓取，请查看原文，，真格学网提供内容。最后，我们要个hover过渡设置相应的值。因为现在元素是300px宽，所以水平线条改为900px，竖线同理改变:
CSS Code复制内容到剪贴板
.box:hover&svg&line.top&{ &&
&&&&-webkit-transform:&translateX(-600px); &&
&&&&transform:&translateX(-600px); &&
.box:hover&svg&line.bottombottom&{ &&
&&&&-webkit-transform:&translateX(600px); &&
&&&&transform:&translateX(600px); &&
.box:hover&svg&line.left&{ &&
&&&&-webkit-transform:&translateY(920px); &&
&&&&transform:&translateY(920px); &&
.box:hover&svg&line.rightright&{ &&
&&&&-webkit-transform:&translateY(-920px); &&
&&&&transform:&translateY(-920px); &&
这点我觉得没必要硬性规定。尤其孩子小的时候，提升孩子阅读兴趣是最重要的，无论是国外童书还是中国童书，只要孩子喜欢就可以。而且在一些关于亲情、友情和爱情的态度上，国外和国内的优秀童书是没有区别的。当然，从个人角度，希望孩子能更多接触本土优秀文化，也希望咱们的原创童书从业者能为孩子们提供更多的选择。。防恶意抓取，请查看原文，，真格学网提供内容。大功告成。希望能通过这些效果激发你的创意，实现更多的效果~一个西方记者说：“请问，中国人民银行有多少资金?”周恩来委婉地说：“中国人民银行的货币资金嘛?有18元8角8分。”当他看到众人不解的样子，又解释说：“中国人民银行发行的面额为10元、5元、2元、l元、。防恶意抓取，请查看原文，，真格学网提供内容。
利用SVG生成的图像，怎么在image标签里显示不出来答：正所谓：既生瑜，何生亮。但是如何在HTML5中使用SVG答：SVG即ScalableVectorGraphics，是一种用来绘制矢量图的HTML5标签。你只需定义好XML属性，就能获得一致的图像元素。使用SVG之前先将标签加入到HTMLbody中。就像其他的HTML标签一样，你可以为SVG标签为之添加ID属性。也可以为之添加css样...怎么将svg文件引入html问：我怎么将已经生成的svg文件test1.svg位置D:\test引入到我写好的jsp文...答：三种方式：使用标签：这个是官方推荐的用法，但是这个官方是Adobe官方，不是W3C官方，现在的HTML标准里还没有这个标签。用法是：pluginspage是插件下载地址。使用标签：这个是W3C的规范，在HTML标准里有这个标签，这个标签里面不能使用js...
本文相关：使用 Snap.svg 制作动画 - WEB前端 - 伯乐在线
& 使用 Snap.svg 制作动画
从主要功能上说，Snap.svg.js 是一个操纵 SVG 节点/制作 SVG 动画的框架，简单点理解可以看下面文字：
Snap.svg 是一个可以使你操纵 SVG 资源和 jQuery 操作 DOM 一样简单的类库
——译自官网
拿 Snap.svg (下文简称 Snap ) 和 jQuery (下文简称 JQ ) 来做对比最合适不过，很可能作者也是参考了 JQ 的 API 设计，那么它们的相似程度有多高呢？请看下面的对比表：
context(上下文)
Snap.select(‘circle’)
el.click(…)/el.touchend(…)
after()/remove()/append()
svg.paper.circle(50,50,40).attr({fill:”#f00”});
jQuery(‘div’)
el.click(…)
after()/remove()/append()
elem.addClass(‘hide’).remove();
在 JQ 中，可操作的最外层 DOM 边界是 document 。而在 Snap 的概念里，可操作的最外层的节点是 svg ，svg 节点的选择、事件绑定都需要在这个上下文里完成。
在上面的对比图可以看出很多 JQ 的影子，无论是选择器、事件绑定、节点操作等等，都是非常的类似 JQ ，有 JQ 基础的同学基本可以半天掌握 Snap 的全部 API。
笔者根据 Snap 的 API 制作了上面的图表，并且简单标注了注释方便大家理解，可以重点关注一下 Element 和 Paper 这两个类。
这个部分是节点操作相关的方法集，也是该类库最基础的部分。
JavaScript
// 选择节点
var svg = Snap('#svg');
svg.select('circle'); // 选择
svg.select('.rect_01'); // 选择
// 选择节点var svg = Snap('#svg');svg.select('circle'); // 选择svg.select('.rect_01'); // 选择
JavaScript
// 事件绑定
var svg = Snap('#svg');
svg.select('circle').click(function() {
// do something
// 事件绑定var svg = Snap('#svg');svg.select('circle').click(function() {// do something});
更多方法请参考文后 API 资料。
这部分是画图相关的方法集，这是几乎每个动画框架都有的部分，类似于的。
SVG 有6种：矩形、圆形 、椭圆、线条、折线、多边形。还有另外一种：路径(path)，path 是最复杂的一种绘图方式，它可以绘制复杂的图形——当然6种基本图形也不在话下。而关于基本图像与 path 之间的转换，可以参考本站的另外一篇文章：。
Paper 方法集主要可以绘制6种基本图形（节点），以及文本（节点）、图片（节点）、渐变等。
JavaScript
// 画一个圆
var svg = Snap('#svg');
svg.paper.circle({
fill: '#f00'
// 创建一张图片
svg.paper.image('url.jpg', 0, 400, 300, 300);
1234567891011
// 画一个圆var svg = Snap('#svg');svg.paper.circle({cx: 100,cy: 100,r: 50,fill: '#f00'}); // 创建一张图片svg.paper.image('url.jpg', 0, 400, 300, 300);
Snap下有不少实用工具，比如 Snap.ajax、Snap.format模板、颜色格式转换和插件方法等。
JavaScript
// 扩展Snap，为其添加插件方法
Snap.plugin(function (Snap, Element, Paper, global, Fragment) {
Snap.newmethod = function () {};
Element.prototype.newmethod = function () {};
Paper.prototype.newmethod = function () {};
// 扩展Snap，为其添加插件方法Snap.plugin(function (Snap, Element, Paper, global, Fragment) {Snap.newmethod = function () {};Element.prototype.newmethod = function () {};Paper.prototype.newmethod = function () {};});
Snap 的做动画主要有两种方式：
使用 Element 里的 animate 方法，Element.animate(attrs, duration, [easing], [callback])
使用 Snap 的静态方法，Snap.animate(from, to, setter, duration, [easing], [callback])，这种方法更通用也更强大，指定开始结束值，setter里面可以放置多个节点的动画。
样例：演示Element.animate方法的使用。预览地址
JavaScript
// 动画样例1
var svg = Snap('#svg');
svg.select('circle').animate({r: 100}, 1000, mina.easeout(), function() {
console.log('animation end');
// 动画样例2
var svg = Snap('#svg');
var circle = svg.select('circle');
var rect = svg.select('rect');
Snap.animate(0, 100, function(val) {
circle.attr({r: val});
rect.attr({x: val});
}, 1000, mina.easeout(), function() {
console.log('animation end');
12345678910111213141516
// 动画样例1var svg = Snap('#svg');svg.select('circle').animate({r: 100}, 1000, mina.easeout(), function() {console.log('animation end');}); // 动画样例2var svg = Snap('#svg');var circle = svg.select('circle');var rect = svg.select('rect');Snap.animate(0, 100, function(val) {circle.attr({r: val});rect.attr({x: val});}, 1000, mina.easeout(), function() {console.log('animation end');});
在 Snap 中，可作为动画的属性有哪些呢？笔者大致分为了几类：
简单数值类，如坐标、宽高、opacity、大部分 Paper API 可配置的属性值，甚至滤镜相关的属性。如{x:100} -& {x:200}, {width:0} -& {width:100}
path 相关动画，如d属性（变形动画）、描边动画、路径跟随动画
matrix 类，放大缩小、位移、旋转等，和 CSS 的 transform 类似
颜色类，颜色变换动画，如 fill、stroke 属性，如{fill:’#f00’} -& {fill:’#f0f’}
样例：颜色变换动画，预览地址
JavaScript
// 动画样例，颜色变化动画
var svg = Snap('#svg');
var circle = svg.paper.circle({cx: 100, cy: 100, r: 50, fill: '#f00'});
circle.animate({fill: '#00f'}, 1000, mina.easeout(), function() {
console.log('animation end');
// 动画样例，颜色变化动画var svg = Snap('#svg');var circle = svg.paper.circle({cx: 100, cy: 100, r: 50, fill: '#f00'});circle.animate({fill: '#00f'}, 1000, mina.easeout(), function() {console.log('animation end');});
这个小节重点会讲上面第2小节提到的 path、matrix 相关动画方式，以及和 CSS 的 transform 动画的异同。
这种类型的动画非常强大。上文已提到基本图形和 path 是可以相互转换的，所以基本图形间的变形动画也是成立的。不仅如此，更复杂的 path 图形，比如波浪、房子、汽车、白云、小icon等，都是可以互相变形。
path 的d属性在 Snap 的解析规则里可以通过一系列的数学运算，动画中通过插值，达到最终态的d值，不过中间的插值计算我们无法干预。
JavaScript
var path = svg.paper.path({d: 'M0.500,65.500 C18.680,33.758 45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500 C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914 246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417 225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500 C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371 363.758,80.355 364.500,109.500',stroke:'#f00', fill: 'rgba(0,0,0,0)'});
setTimeout(function() {
// 终止态：曲线变直
// path.animate({d: 'M1,100 L350,100'}, 1000, mina.easeout(), function() {
// console.log('animation end');
// 终止态：心形
path.animate({d: 'M114.500,58.500 C106.230,58.751 23.907,-37.262 5.500,21.500 C-26.759,124.483 111.761,221.360 119.500,219.500 C154.464,211.096 201.234,149.580 220.500,104.500 C250.260,34.864 220.892,7.159 194.500,1.500 C160.455,-5.800 122.344,58.262 114.500,58.500 Z'}, 1000, mina.easeout(), function() {
console.log('animation end');
123456789101112
// 开始态var path = svg.paper.path({d: 'M0.500,65.500 C18.680,33.758 45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500 C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914 246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417 225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500 C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371 363.758,80.355 364.500,109.500',stroke:'#f00', fill: 'rgba(0,0,0,0)'});setTimeout(function() {// 终止态：曲线变直// path.animate({d: 'M1,100 L350,100'}, 1000, mina.easeout(), function() {// console.log('animation end');// });// 终止态：心形path.animate({d: 'M114.500,58.500 C106.230,58.751 23.907,-37.262 5.500,21.500 C-26.759,124.483 111.761,221.360 119.500,219.500 C154.464,211.096 201.234,149.580 220.500,104.500 C250.260,34.864 220.892,7.159 194.500,1.500 C160.455,-5.800 122.344,58.262 114.500,58.500 Z'}, 1000, mina.easeout(), function() {console.log('animation end');});}, 1000);
样例：曲线变直线，预览地址
样例：曲线变心形，预览地址
这种动画主要用的是 svg 的 stroke-dasharray、stroke-dashoffset 属性，这中动画方式在本站的另外一篇文章有详细介绍，这里不再赘述：
样例：简单曲线描边动画
JavaScript
var path = svg.paper.path({d: 'M0.500,65.500 C18.680,33.758 45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500 C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914 246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417 225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500 C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371 363.758,80.355 364.500,109.500', stroke:'#f00', fill: 'rgba(0,0,0,0)'});
var length = Snap.path.getTotalLength(path);
path.attr({
'stroke-dashoffset': length,
'stroke-dasharray': length // 用Snap的API计算复杂的path长度
Snap.animate(length, 0, function(val) {
path.attr({
'stroke-dashoffset': val
}, 1000, mina.easeout(), function() {
console.log('animation end');
12345678910111213
var path = svg.paper.path({d: 'M0.500,65.500 C18.680,33.758 45.141,-6.797 72.500,2.500 C99.859,11.797 72.148,59.027 79.500,98.500 C86.852,137.973 117.668,128.914 138.500,59.500 C159.332,-9.914 246.500,59.500 246.500,59.500 C273.181,117.750 137.350,184.417 225.500,173.500 C351.137,157.940 155.369,160.617 162.500,86.500 C165.180,58.645 237.169,-2.418 283.500,2.500 C357.654,10.371 363.758,80.355 364.500,109.500', stroke:'#f00', fill: 'rgba(0,0,0,0)'});var length = Snap.path.getTotalLength(path);path.attr({'stroke-dashoffset': length,'stroke-dasharray': length // 用Snap的API计算复杂的path长度});Snap.animate(length, 0, function(val) {path.attr({'stroke-dashoffset': val});}, 1000, mina.easeout(), function() {console.log('animation end');});
或者用CSS实现：
@keyframes demo4 {
stroke-dashoffset: 0
animation: demo4 1s ease-
@keyframes demo4 {100% {stroke-dashoffset: 0}}.demo4 {animation: demo4 1s ease-}
样例：花纹描边。这是codepen上一个复杂的例子——复杂花纹的描边动画，预览地址：
这种动画是指一个 svg 节点（基本图形、文本、图片等）沿着轨迹移动的动画，主要适用于模拟交通工具航行轨迹、粒子散开轨迹等。
这种动画的关键之处在于要知道 path 的长度与坐标之间的对应关系，Snap 提供了可供获取path的长度以及根据长度获取位置坐标的 API。结合上面的 Snap.animate 方法，路径跟随动画的制作会变得非常简单。
样例：跟随曲线运动的小飞机，预览地址：
JavaScript
var length = Snap.path.getTotalLength(path); // 获取path的长度
Snap.animate(0, length, function(val) {
var point = Snap.path.getPointAtLength(path, val); // 根据path长度变化获取坐标
var m = new Snap.Matrix();
m.translate(point.x, point.y);
m.rotate(point.alpha-90); // 使飞机总是朝着曲线方向。point.alpha：点的切线和水平线形成的夹角
plane.transform(m);
}, 30000, mina.easeout(), function() {
console.log('animation end');
12345678910
var length = Snap.path.getTotalLength(path); // 获取path的长度Snap.animate(0, length, function(val) {var point = Snap.path.getPointAtLength(path, val); // 根据path长度变化获取坐标var m = new Snap.Matrix();m.translate(point.x, point.y);m.rotate(point.alpha-90); // 使飞机总是朝着曲线方向。point.alpha：点的切线和水平线形成的夹角plane.transform(m);}, 30000, mina.easeout(), function() {console.log('animation end');});
样例：双12开场动画，这是笔者去年做的一个路径跟随动画效果，预览地址：
另外，用新的 CSS 属性 motion-path 也可以实现类似效果，但目前支持程度堪忧，只有 PC 的 chrome 以及 Opera、最新的X5内核手机浏览器 支持情况较好。
@keyframes demo5 {
motion-offset: 0;
motion-offset: 100%;
motion-path: path("M221.712,180.442C237.176,177.728,279.348,178.094,261,152c-18.742-26.654-48.543-28.207-63-22-14.981,6.431-34.763,6.357-34,40s66.09,74.162,88,68,60.358-23.742,67-49,14.211-59.957-27-81S163.688,88.664,153,98c-7.828,6.838-32.045,22.952-32,64,0.039,35.491,7.878,62.872,14,78s52.737,39.557,73,41,58.638,16.552,105-7c44.249-22.478,75.073-94.409,55-164C349.768,46.792,217.142,54.519,200,55S104.613,66.128,78,111c-16.922,28.532-16.5,96.616,1,134,14.482,30.932,51.88,58.52,68,64,39.988,13.593,100.081,21.615,129,17");
motion-rotation: auto 90 // 使飞机方向始终朝着曲线
animation: demo5 10s
12345678910111213
@keyframes demo5 {0% {motion-offset: 0;}100% {motion-offset: 100%;}}.demo5 {motion-path: path("M221.712,180.442C237.176,177.728,279.348,178.094,261,152c-18.742-26.654-48.543-28.207-63-22-14.981,6.431-34.763,6.357-34,40s66.09,74.162,88,68,60.358-23.742,67-49,14.211-59.957-27-81S163.688,88.664,153,98c-7.828,6.838-32.045,22.952-32,64,0.039,35.491,7.878,62.872,14,78s52.737,39.557,73,41,58.638,16.552,105-7c44.249-22.478,75.073-94.409,55-164C349.768,46.792,217.142,54.519,200,55S104.613,66.128,78,111c-16.922,28.532-16.5,96.616,1,134,14.482,30.932,51.88,58.52,68,64,39.988,13.593,100.081,21.615,129,17");motion-rotation: auto 90deg; // 使飞机方向始终朝着曲线animation: demo5 10s linear infinite both;}
预览地址（请在最新版 chrome、Opera 或最新的X5内核手机浏览器查看）
Snap 的 matrix 动画包含各位熟悉的 translate/scale/rotate/skew 动画，原理和 CSS 的 transform 也几乎一致。
1) matrix简单位移动画，预览地址：
JavaScript
// 简单位移动画
var rect = svg.paper.rect({x: 100, y: 100, width: 50, height: 30, fill: '#f00'});
var anim = function() {
Snap.animate(0, 150, function(val) {
var m = new Snap.Matrix();
m.translate(val, 0); // translate位移API
rect.transform(m); // 在rect节点应用matrix
}, 1000, mina.easeout(), function() {
console.log('animation end');
setTimeout(anim, 300);
12345678910111213
// 简单位移动画var rect = svg.paper.rect({x: 100, y: 100, width: 50, height: 30, fill: '#f00'});var anim = function() {Snap.animate(0, 150, function(val) {var m = new Snap.Matrix();m.translate(val, 0); // translate位移APIrect.transform(m); // 在rect节点应用matrix}, 1000, mina.easeout(), function() {console.log('animation end');setTimeout(anim, 300);});}anim();
2) matrix位移、旋转复合动画，预览地址：
JavaScript
// 位移、旋转复合动画
var rect = svg.paper.rect({x: 10, y: 100, width: 50, height: 30, fill: '#f00'});
var g = svg.paper.group(rect); // 创建了一个分组节点g作为位移动画节点
var anim_rotate = function() { // 节点旋转部分
Snap.animate(0, 250, function(val) {
var m = new Snap.Matrix();
m.rotate((val/250)*360, 10+25, 100+15); // 注意，后面两位数是旋转中心点，属于绝对坐标，svg里节点的变换中心都是绝对坐标，和CSS的transform-origin取值不太一样
rect.transform(m);
}, 500, mina.easeout(), function() {
console.log('animation end');
anim_rotate();
anim_rotate();
var anim_move = function() { // 节点位移部分
Snap.animate(0, 250, function(val) {
var m = new Snap.Matrix();
m.translate(val, 0);
g.transform(m);
}, 2000, mina.easeout(), function() {
console.log('animation end');
anim_move();
anim_move();
12345678910111213141516171819202122232425
// 位移、旋转复合动画var rect = svg.paper.rect({x: 10, y: 100, width: 50, height: 30, fill: '#f00'});var g = svg.paper.group(rect); // 创建了一个分组节点g作为位移动画节点var anim_rotate = function() { // 节点旋转部分Snap.animate(0, 250, function(val) {var m = new Snap.Matrix();m.rotate((val/250)*360, 10+25, 100+15); // 注意，后面两位数是旋转中心点，属于绝对坐标，svg里节点的变换中心都是绝对坐标，和CSS的transform-origin取值不太一样rect.transform(m);}, 500, mina.easeout(), function() {console.log('animation end');anim_rotate();});};anim_rotate();var anim_move = function() { // 节点位移部分Snap.animate(0, 250, function(val) {var m = new Snap.Matrix();m.translate(val, 0);g.transform(m);}, 2000, mina.easeout(), function() {console.log('animation end');anim_move();});};anim_move();
上面两个动画用 CSS 的方式实现代码如下：
@keyframes demo6 {
transform: translate3d(250px, 0, 0);
// 简单位移动画CSS版
animation: demo6 2s
@keyframes demo7_rotate {
transform: rotate(360deg);
@keyframes demo7_move {
transform: translate3d(250px, 0, 0);
// 旋转、位移符合动画CSS版
animation: demo7_move 2s
transform-origin: 35px 115
animation: demo7_rotate .5s
12345678910111213141516171819202122232425262728
@keyframes demo6 {100% {transform: translate3d(250px, 0, 0);}}// 简单位移动画CSS版.demo6 {animation: demo6 2s linear infinite both;} @keyframes demo7_rotate {100% {transform: rotate(360deg);}}@keyframes demo7_move {100% {transform: translate3d(250px, 0, 0);}}// 旋转、位移符合动画CSS版.demo7 {animation: demo7_move 2s linear infinite both;rect {transform-origin: 35px 115px;animation: demo7_rotate .5s linear infinite both;}}
简单位移动画CSS版预览；旋转、位移符合动画CSS版预览。
这部分会说一下笔者在开发过程中遇到的一些兼容性问题以及使用建议。当然还会有更多的笔者没遇到的问题，欢迎各位看官多多评论交流，不吝赐教。
总的来说，Snap 的 API 兼容性不错，官网声称兼容 IE9 及以上、Safari、Chrome、Firefox、Opera；而移动设备方面，经笔者测试 iOS、安卓 X5 内核、安卓原生浏览器兼容性都不错，文中的例子除了特殊说明外的都可以执行
作用于 svg 节点的 CSS transform 动画在安卓原生浏览器下兼容性不好， X5 则正常
在 iOS7 和 8 下 innerHTML 方法不能用于 svg 里
安卓原生浏览器绘制 svg 图形很可能会产生渲染模糊的现象（如下图），在 svg 里加上一个 text 节点即可神奇的修复
这样的节点 &text&a&/text& 即可修复模糊的问题，但不能 display:none 隐藏
一般来说，transform 动画可以优先使用 CSS 的方式实现，但如果需要复杂的分段控制或者更好的兼容性，可以试试 Snap 的 transform&matrix 方式
Snap 的有些动画需要大量计算，虽然 svg 里的节点属于“绝对定位”，动画时一般不会引起重排（参考下图），但在移动设备上也要注意动画元素不宜过多。以 image 动画为例， 经笔者测试，150×150 左右的图片动画节点控制在 10 个左右基本能达到大部分机型的性能要求
滤镜类属性在移动设备上不宜做动画
小飞机动画在 chrome 的渲染层边界图：
橙色边为 svg 的边界（即渲染层，为了便于查看 svg 节点经过了 transform:rotateY(30deg) ；绿色为重绘部分。可以看出 svg 里的动画元素只会引起重绘，而里面的节点用 translateZ 也并不会新开一个渲染层。
可能感兴趣的话题
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线