前端---Svg矢量图(入门)

55 阅读1分钟

一个人优秀的背后,

都是自虐般的自律。

自律不是偶尔晚睡或早起,

不是一时兴起去学习,

更不是间歇性的努力,

而是长久让自己保持一种该有的规格,

是亲手干掉另一个颓废的自己。

前端的路还很长,加油!

Svg

svg——是一种基于XML的图像文件格式,是为可缩放的矢量图形,图片放大不会失真。对于IE8以下不兼容。

svg——svg元素构建模块:

       <svg>  包裹并定义整个矢量图
       <line> 创建一条直线
       <polyline>  创建折线
       <rect>  创建矩形
       <circle>  创建圆
       <ellipse>  创建圆和椭圆
       <polygon>  创建多边形
       <path>   通过指定点以及点和点之间的线来创建任意形状

svg基本使用——绘制直线

Snipaste_2023-02-14_10-37-14.png

效果:

Snipaste_2023-02-14_10-38-17.png

svg基本使用——绘制折线

Snipaste_2023-02-14_10-45-55.png

效果:

Snipaste_2023-02-14_10-46-47.png

svg基本使用——绘制矩形

Snipaste_2023-02-14_10-53-36.png

效果:

Snipaste_2023-02-14_10-54-11.png

svg基本使用——绘制圆形

Snipaste_2023-02-14_11-01-02.png

效果:

Snipaste_2023-02-14_11-01-24.png

svg基本使用——绘制椭圆

Snipaste_2023-02-14_11-07-09.png

效果:

Snipaste_2023-02-14_11-09-02.png

svg基本使用——绘制多边形

Snipaste_2023-02-14_11-14-07.png

效果:

Snipaste_2023-02-14_11-15-28.png

svg基本使用——绘制任意图形

Snipaste_2023-02-14_11-22-18.png

效果:

Snipaste_2023-02-14_11-23-01.png