前端图形之:SVG与Canvas（border、clip-path）

桃扇骨 2024-04-01 11:11 97阅读 0赞

## 00、前端图形 ##

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

![4f7b02f05cd331d0cb1c1f5c1c3900ef.jpeg][]

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

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

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

![b5eab44960098ec456f102c541e760e2.png][]

--------------------

## 01、< svg>矢量图形 ##

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

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

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

### 1.1、< svg>元素 ###

`<svg>`内部支持多种图形算法，基础的如线`line`、圆形`<circle>`、矩形`rect`、文本`text`，复杂的有折线`polyline`、多边形`polygon`、路径数据`path`等。这些图形都以子元素的形式组合，因此也就都支持CSS、JS的操作了。

[4f7b02f05cd331d0cb1c1f5c1c3900ef.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/25cd2d99a21741279c3fee79a052b209.jpeg
[b5eab44960098ec456f102c541e760e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6fc12a8f3a364f6bb7d1543e85523e3f.png
[svg]: https://developer.mozilla.org/zh-CN/docs/Web/SVG