前端图形:SVG与Canvas

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

00、前端图形

前端代码实现图形的几种方式：CSS、SVG、Canvas（主要是JavaScript编码）

CSS也是可以画图的，需要借助于高宽、边框border、clip-path裁剪、渐变色背景等属性来模拟实现各种图形，当然只能实现一些简单的图形。

**border：**用四条边框样式属性的各种组合变换，实现一些简单的图形。网上也有画一些稍微复杂的图形，如哆啦A梦，但代码量稍多，可读性不好，并不推荐。

|  | <div class="gcss"> |
|  | <p class="border">borderp> |
|  | <p class="rborder">圆角按钮p> |
|  | <p class="radio">p>radio |
|  | <p class="triangle1">p>三角形 |
|  | <p class="triangle2">p>三角形 |
|  | div> |
|  | <style> |
|  | .gcss p { |
|  | display: inline-block; |
|  | text-align: center; vertical-align: middle; |
|  |  } |
|  | .border { |
|  | border: 30px solid; |
|  | border-color: aqua tan violet peru; |
|  | border-radius: 20px; |
|  |  }  |
|  | .rborder { |
|  | background-color: #b1ccf3; |
|  | width: 100px; height: 40px; line-height: 40px; |
|  | border-radius: 20px; |
|  |  } |
|  | .radio { |
|  | width: 40px; height: 40px; |
|  | border-radius: 50%; |
|  | border: 10px solid; |
|  |  } |
|  | .triangle1 { |
|  | border: 50px solid #0001; |
|  | border-left-color: red; |
|  |  } |
|  | .triangle2 { |
|  | border-left: 50px solid #0001; |
|  | border-right: 50px solid #0001; |
|  | border-bottom: 50px solid red; |
|  |  } |
|  | style> |


---

01、< svg>矢量图形

< svg>可缩放矢量图形（Scalable Vector Graphics，SVG），是一种基于 XML（数学）描述的二维的矢量图形，内容可以直接插入网页，成为DOM的一部分，然后用 JavaScript 和 CSS 进行操作。SVG 内容也可以写在一个独立文件中，然后用CSS（background-url）、![]()、、、来引用。

大多数现代浏览器都支持SVG 图形，越来越多的项目在使用SVG图形，简单的像图标，复杂的一些图表Chart也有不少是基于SVG实现的。相比于位图，体积更小，可无线缩放而不失真。

比较	矢量图形	位图
存储的数据	存储元素、算法数据	存储像素数据
存储大小	小	大
缩放效果	无线缩放，不失真	固定大小，放大会失真
可维护性	很容易修改	修改麻烦
扩展性	支持CSS、JS	不支持
文件格式	.svg，直接嵌入数据到页面	.bmp/.png/.jpg/.gif，< img>可嵌入svg文件
支持的元素	、、、	、
兼容性	IE9开始支持	较好
渲染性能	复杂的SVG会占用很多时间	稳定
网络传输性能	和页面数据一起，体积小，速度快	需单独请求图片资源
缓存	随网页内容一起，不可单独缓存	图片可单独缓存

1.1、< svg>元素

内部支持多种图形算法，基础的如线line、圆形、矩形rect、文本text，复杂的有折线polyline、多边形polygon、路径数据path等。这些图形都以子元素的形式组合，因此也就都支持CSS、JS的操作了。iconfont-阿里巴巴矢量图标库上有非常丰富的< svg>矢量图形。

元素/属性	描述<