前端图形:SVG与Canvas( 三 ) _生活百科

文章插图
1.2、动画SVG 本身就是一个HTML元素，因此动画可以用CSS的动画来实现（参考 CSS动画），SVG中也有专门用于实现动画的<animate>子元素。这里示例采用JavaScript+transform变换实现旋转效果。
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="150" cy="100" r="80" fill="green" /> <circle cx="150" cy="100" r="70" fill="#fff" /> <text class="svgc" x="150" y="125" font-size="60" text-anchor="middle" fill="orange" >SVG</text> <line class="svgc" x1="0" y1="100" x2="300" y2="100" stroke="white" stroke-width="8" /></svg><script> let svgcs = document.querySelectorAll(".svgc"); //设置中心点 svgcs.forEach(element => {element.setAttribute("transform-origin", '150 100'); }); let deg = 0; setInterval(() => {deg = deg > 360 ? 0 : deg+4;svgcs.forEach(element => {element.setAttribute("transform", `rotate(${deg})`);}); }, 100);</script><style> .svgc {transform-origin: 150px 100px;animation: svgc-routate 2s linear 1s infinite; } @keyframes svgc-routate {from {transform: rotate(0deg);}to {transform: rotate(360deg);} }</style>【前端图形:SVG与Canvas】

文章插图
1.3、svg工具/资源/库矢量图标资源

Iconfont-阿里巴巴矢量图标库，功能很强大，及其提供丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。应该就这个就够了！
flaticon，国外的矢量图标库

SVG工具路径< path>可以绘制任意的图形，直接编码是比较困难的，特别是C贝塞尔曲线。所以一般都是用专业工具来绘制< svg>图形的，也有在线工具。

专业工具AI：Adobe Illustrator
在线SVG编辑器，Method Draw
SVGator，一个在线SVG动画制作工具，导入SVG文件，进行可视化的动画制作。

动画库

第三方库GSAP，来自GreenSock，可以更简单的实现更丰富的动画效果，不光支持SVG，包括页面中任意可以通过JS访问的元素、属性，都可以实现动画。
anime.js，功能强大，非常轻量，压缩后大小9K 。
SVG动画库：mo.js、SVG.js

02、< canvas>基础< canvas>只是一块平平无奇的画布而已（在HTML中就一个<canvas>元素），提供了一点点API，由JS进行绘制各种图形。2D的canvas绘制和<SVG>挺像，都是一些线、矩形、圆、path路径数据。这里就先简单了解一下，<canvas>功能是很强大的，很多可视化图表都是基于<canvas>实现的。
基本特点：