前端基础（三十五）：SVG入门

野性酷女 2024-04-07 15:16 93阅读 0赞

### SVG - `viewBox` ###

![在这里插入图片描述][0d80cbff0ebb4ce28b00da226808ce7b.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>属性&amp;值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>svg width=“320” height=“200” <br> viewBox=“0 0 100 100”</td> 
   <td>相当于把viewBox区域整体放大了2倍,并居中</td> 
  </tr> 
 </tbody> 
</table>

### 基本形状 ###

![在这里插入图片描述][f8a3299b025e4f068470b4432e49e39b.png_pic_center]

### Path 直线命令 ###

![在这里插入图片描述][2fe013419559459caf26d5b072c02023.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>M</td> 
   <td>画笔 - 起始位置</td> 
  </tr> 
  <tr> 
   <td>L</td> 
   <td>画线 - 终点位置</td> 
  </tr> 
  <tr> 
   <td>H</td> 
   <td>画线 - 绘制水平线</td> 
  </tr> 
  <tr> 
   <td>V</td> 
   <td>画线 - 绘制垂直线</td> 
  </tr> 
  <tr> 
   <td>Z</td> 
   <td>画线 - 闭合路径</td> 
  </tr> 
 </tbody> 
</table>

### Path 三次贝塞尔曲线 ###

![在这里插入图片描述][7e8f6eb16fc54001a8b1ee226392c3b7.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>C</td> 
   <td>三次贝塞尔曲线</td> 
  </tr> 
  <tr> 
   <td>S</td> 
   <td>用来创建与前面一样的贝塞尔曲线</td> 
  </tr> 
 </tbody> 
</table>

### Path 二次贝塞尔曲线 ###

![在这里插入图片描述][edf4d63f8f964382b066c598dd7d913e.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Q</td> 
   <td>二次贝塞尔曲线</td> 
  </tr> 
  <tr> 
   <td>T</td> 
   <td>用来创建与前面一样的贝塞尔曲线</td> 
  </tr> 
 </tbody> 
</table>

### 弧形 ###

![在这里插入图片描述][862441d7752e46e48cc1bcd5fc80b2b4.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>A</td> 
   <td>rx ry x-axis-rotation large-arc-flag sweep-flag x y</td> 
  </tr> 
  <tr> 
   <td>x-axis-rotation</td> 
   <td>x 轴旋转角度</td> 
  </tr> 
  <tr> 
   <td>large-arc-flag</td> 
   <td>角度大小,决定弧线是大于还是小于 180 度,0 表示小角度弧,1 表示大角度弧</td> 
  </tr> 
  <tr> 
   <td>sweep-flag</td> 
   <td>弧线方向,0 表示从起点到终点沿逆时针画弧,1 表示从起点到终点沿顺时针画弧</td> 
  </tr> 
 </tbody> 
</table>

### 填充和边框 ###

![在这里插入图片描述][f264b96ac5a444a1bb8f4747bb367dc3.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>fill-rule</td> 
   <td>定义如何给图形重叠的区域上色</td> 
  </tr> 
  <tr> 
   <td>stroke-miterlimit</td> 
   <td>定义什么情况下绘制或不绘制边框连接的miter效果</td> 
  </tr> 
  <tr> 
   <td>stroke-dashoffset</td> 
   <td>定义虚线开始的位置</td> 
  </tr> 
 </tbody> 
</table>

### 线性渐变 ###

![在这里插入图片描述][bc982f9ce3e44f89a2da86e935ff141a.png_pic_center]

### 径向渐变 ###

![在这里插入图片描述][1da21b1209f84e9290dcb0aa8efb8439.png_pic_center]

### 图案 ###

![在这里插入图片描述][56952ed95c564a6bb1ff194ae740b0f1.png_pic_center]

### 基础变形 ###

![在这里插入图片描述][f14239a43526439393e20aed96593c85.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>translate</td> 
   <td>平移</td> 
  </tr> 
  <tr> 
   <td>rotate</td> 
   <td>旋转</td> 
  </tr> 
  <tr> 
   <td>scale</td> 
   <td>缩放</td> 
  </tr> 
  <tr> 
   <td>skewX skewY</td> 
   <td>斜切</td> 
  </tr> 
 </tbody> 
</table>

### 剪切 ###

![在这里插入图片描述][44119b45f76d4696bf25102ba2b48f35.png_pic_center]

### 遮罩 ###

![在这里插入图片描述][e9f3824b016f47538976e52b8a4d7cbe.png_pic_center]

### 嵌入光栅图像 ###

![在这里插入图片描述][f3920ea567f6466dbaa703a91057f3c5.png_pic_center]

[0d80cbff0ebb4ce28b00da226808ce7b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3757a5c7d0ed4bd191e6cc48d26cd7c6.png
[f8a3299b025e4f068470b4432e49e39b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/9d485a0ca1744b38a0ffa6f6b83e6ef9.png
[2fe013419559459caf26d5b072c02023.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0af8c54f271b472bbb94961445f4edeb.png
[7e8f6eb16fc54001a8b1ee226392c3b7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5e105cfbee844dce9262b10cbc4009e5.png
[edf4d63f8f964382b066c598dd7d913e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d3291678306149ae9fe47c1ad8975123.png
[862441d7752e46e48cc1bcd5fc80b2b4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a1cfa31bcdbe470db9db17ff85152b31.png
[f264b96ac5a444a1bb8f4747bb367dc3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/154ad387580749938990c06df0753a13.png
[bc982f9ce3e44f89a2da86e935ff141a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/71f5a311e77143bb8aa25f0604b4b334.png
[1da21b1209f84e9290dcb0aa8efb8439.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/65ae6b2f929d415cbafd78d3f280f7da.png
[56952ed95c564a6bb1ff194ae740b0f1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/cacc64b498904626ba73902b7232136a.png
[f14239a43526439393e20aed96593c85.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ea50f71d80574d9ebdf2fb04720ec7c5.png
[44119b45f76d4696bf25102ba2b48f35.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/fccab079f3414c18b731beb5171e2661.png
[e9f3824b016f47538976e52b8a4d7cbe.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8ec5223d45a34efe8fd5ece509fc3761.png
[f3920ea567f6466dbaa703a91057f3c5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1592dc0b831144e784fcd41929c8ef2f.png