Bootstrap

SVG常用图形与path路径详解

基础知识

svg

描述

所有的svg元素都应放在svg标签下才可以生效，svg实际上是用于显示所创建的svg矢量图的一个画布

属性

参数描述
widthsvg画布的真实宽度
heightsvg画布的真实高度
viewBox视野，用于规定svg画布显示的位置以及显示的范围，由4个参数x，y，w，h控制

viewBox详解：

​ 首先，对于svg的是没有边界的，svg画布只是用于展示svg世界中某一个范围的内容，而对于超过了svg画布范围的内容，则会被遮挡。默认svg画布默认显示世界坐标下原点坐标的width*height面积的矩形视野。

​ 我们可以通过viewBox来修改默认的显示配置，viewBox由4个点组成，viewBox=“x, y, w, h”；其中x，y就是用于定义svg画布在世界坐标下的位置，通过修改x，y可以移动画布在世界坐标下的位置。而w，h则是定义svg画布的视野区域；默认情况下viewBox=“0,0,width,height”

  1. 当w<width、h<height的时候，相当于是拉近了视野，视野小了，但实际显示的区域没有发生变化；这就会导致显示的图形变大，显示的区域变小。
  2. 当w>width、h>height的时候，相当于拉远了视野，视野变大了，但实际显示的区域没有发生变化；这就会导致显示的图形变小，显示的区域变大。

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400px" 
     height="400px"
     viewBox="20,20,400,400"
     >
  <ellipse cx="0" cy="0" rx="5" ry="5" style="fill:aquamarine;stroke-width:0"></ellipse>
  <rect x="0" y="0" width="100" height="100" stroke="red" stroke-width="1" fill="none"></rect>
  <rect x="300" y="300" width="100" height="100" style="stroke:cadetblue;stroke-width:1;fill:none"></rect>
</svg>

显示属性

描述

用于规定svg元素的样式显示属性，包括颜色，边框，线宽等属性，显示属性既可以作为元素的属性也可作为css样式属性来生效，如红色的2p边框

普通属性：stroke=“red” stroke-width=“2”;

css属性：style=“stroke:red;stroke-width=2”

两种方式都是可以实现红色的2px边框

属性

参数描述值
fill填充图形颜色颜色，渐变
stroke绘制图形的边框颜色颜色，渐变
stroke-width绘制图形的边框宽度数值
stroke-linejoin线条连接处样式miter|round|bevel
stroke-linecap线条首尾处样式butt|round|square
transform属性变换translate|scale|rotate
transform-origin变换中心数值|百分比|位置

图形绘制

直线

描述

绘制一条直线

属性

参数是否必须描述
x1否直线起点的x坐标，默认是0
y1否直线起点的y坐标，默认是0
x2是直线终点的x坐标
y2是直线终点的y坐标
style否显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <line x1="40" y1="10" x2="200" y2="89" style="stroke:burlywood;stroke-width:2"></line>
</svg>

矩形

描述

绘制一个直角/圆角矩形

属性

参数是否必须描述
x否矩形左上角的x坐标，默认是0
y否矩形左上角的y坐标，默认是0
rx否矩形水平方向的圆角半径，默认是0
ry否矩形垂直方向的圆角半径，默认与rx相等
width是矩形宽度
height是矩形高度
style否显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <text x="10" y="30">直角矩形</text>
  <text x="200" y="30">圆角矩形</text>
  <rect x="10" y="50" width="150" height="100" style="fill:azure;stroke:burlywood;stroke-width:2"></rect>
  <rect x="200" y="50" rx="15" ry="15" width="150" height="100" fill="azure" stroke="burlywood" stroke-width="2"></rect>
</svg>

椭圆

描述

绘制一个椭圆，包括圆

属性

参数是否必须描述
cx否圆心的x坐标，默认是0
cy否圆心的y坐标， 默认是0
rx是圆心的长轴半径
ry否圆心的短轴半径，默认为rx的值
style否显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <text x="30" y="30">椭圆</text>
  <text x="200" y="30">特殊的椭圆</text>
  <ellipse cx="100" cy="100" rx="80" ry="50" style="fill:azure;stroke:burlywood;stroke-width:2"></ellipse>
  <ellipse cx="250" cy="100" rx="50" ry="50" style="fill:azure;stroke:burlywood;stroke-width:2"></ellipse>
</svg>

圆

描述

绘制一个圆

属性

参数是否必须描述
cx否圆心的x坐标，默认是0
cy否圆心的y坐标， 默认是0
r是圆的半径
style否显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

示例

多边形

描述

绘制一个三边以上的图形

属性

参数是否必须描述
points是图形上点的坐标集合
style否显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

points详解：

​ points是图形顶点的集合，坐标之间与点之间使用空格或逗号来隔开，比如points="x1 y1 x2 y2 x3 y3"或者points=“x1,y1,x2,y2,x3,y3”；但为了显示方便与规范，统一坐标之间用逗号隔开，点之间用空格隔开，如points=“x1,y1 x2,y2 x3,y3”

​ 图形的绘制是根据points的点坐标从左向右开始，如，对于points=“x1,y1 x2,y2 x3,y3 x4,y4”；图形从（x1,y1）开始，然后连接（x2,y2），在连接（x3,y3），再连接（x4,y4），最后首尾相连（连接起点x1，y1），最终形成闭合的图形。

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <polygon
           points="90,10 110,50 170,50 110,70 150,120 90,80 50,120 70,70 30,50 80,50"
           style="fill:azure;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></polygon>
</svg>

曲线

描述

绘制一条曲线

属性

参数是否必须描述
points是曲线上点的坐标集合
style否显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

points详解：

​ 曲线的points参数与多边形的points是类似的，都是点的集合，而且是从左向右开始绘制；

​ 但区别在于，多边形再绘制完最后一个点的时候会连接起点形成闭合图形，而曲线则不会，仅从第一个点绘制到最后一个点便结束绘制了

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <polyline
            points="90,10 110,50 170,50 110,70 150,120 90,80 50,120 70,70 30,50 80,50"
            style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></polyline>
</svg>

路径

描述

用于绘制非常规图形或者线条的绘制

属性

参数是否必须描述
d是绘制路径的指令以及参数
style否显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

d详解：

大写的指令代表了绝对定位，而小写则代表相对定位；

指令参数描述
Mx y将当前的起始位置移动到x, y
Lx y将路径当前结束位置与x, y相连接
Hx将路径当前结束位置与x, 当前位置y相连接
Vy将路径当前结束位置与当前位置y, x相连接
Qcx cy px py由一个控制点C与结束点P来控制二次贝塞尔曲线的绘制
Ccx1 cy1 cx2 cy2 px py由两个控制点C1,C2和结束点来控制三次贝塞尔曲线的绘制
Tx y由一个控制点(默认是上一个锚点的镜像)，和结束点来绘制光滑的二次贝塞尔曲线
Scx1 cy1 px py由两个控制点(默认是上一个锚点的镜像)和C1以及一个结束点P来绘制光滑的三次贝塞尔曲线
Arx ry xa lf sf ex ey由七个参数控制，详情看A指令
Z无结束绘制并连接起点
L指令

描述

代表连接的意思；Lx1,y1，连接到点（x1,y1）

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <path
        d="M20,90 L30,10 L100,100 L190,20 Z"
        style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"
        ></path>
</svg>
H指令

描述

连接到水平线上的某个点

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <path
        d="M20,90 H100"
        style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"
        ></path>
</svg>
V指令

描述

连接到垂直线上的某个点

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <path
        d="M20,20 V100"
        style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"
        ></path>
</svg>
Q指令

描述

绘制一条二次贝塞尔曲线，二次贝塞尔曲线由一个起点、一个控制点和一个结束点来控制

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <path
        d="M20,20 Q100,50,80,120"
        style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"
        ></path>
  <circle cx="20" cy="20" r="2" style="fill:cadetblue;stroke:none"></circle>
  <text x="30" y="20">起点</text>
  <circle cx="100" cy="50" r="2" style="fill:cadetblue;stroke:none"></circle>
  <text x="110" y="50">控制点</text>
  <circle cx="80" cy="120" r="2" style="fill:cadetblue;stroke:none"></circle>
  <text x="90" y="120">结束点</text>
</svg>
C指令

描述

绘制一条三次贝塞尔曲线，三次贝塞尔曲线由一个起点、一个结束点和两个控制点来控制

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <path
        d="M20,20 C100,10 200,50,80,120"
        style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"
        ></path>
  <circle cx="20" cy="20" r="2" style="fill:cadetblue;stroke:none"></circle>
  <text x="30" y="20">起点</text>
  <circle cx="100" cy="10" r="2" style="fill:cadetblue;stroke:none"></circle>
  <text x="110" y="20">控制点1</text>
  <circle cx="200" cy="50" r="2" style="fill:cadetblue;stroke:none"></circle>
  <text x="210" y="50">控制点2</text>
  <circle cx="80" cy="120" r="2" style="fill:cadetblue;stroke:none"></circle>
  <text x="90" y="120">结束点</text>
</svg>
T指令

T指令是用于创建平滑的二次贝塞尔曲线，T指令只需规定结束点的位置，其控制点的位置应为其上一个控制点关于该结束点对称点，如果上一个控制点不存在，则最后一个锚点的位置即为控制点的位置

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <path
        d="M20,20 T50,30 T90,100 T10,150"
        style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"
        ></path>
  <!-- 锚点 -->
  <text x="20" y="10" style="font-size:10;">P0</text>
  <text x="40" y="40" style="font-size:10;">P1</text>
  <text x="95" y="100" style="font-size:10;">P2</text>
  <text x="10" y="160" style="font-size:10;">P3</text>

  <!-- 控制点 -->
  <text x="85" y="40" style="font-size:10;">C1：控制点1，锚点P0关于锚点P1对称点</text>
  <text x="105" y="160" style="font-size:10;">C2：控制点2，控制点C1关于锚点P2对称点</text>

  <circle cx="80" cy="40" r="2" style="fill:brown;stroke:none"></circle>
  <circle cx="100" cy="160" r="2" style="fill:brown;stroke:none"></circle>
  <line x1="50" y1="30" x2="80" y2="40" style="stroke:brown;"></line>
  <line x1="100" y1="160" x2="80" y2="40" style="stroke:brown;"></line>
  <line x1="100" y1="160" x2="10" y2="150" style="stroke:brown;"></line>

  <circle cx="20" cy="20" r="2" style="fill:cadetblue;stroke:none"></circle>
  <circle cx="50" cy="30" r="2" style="fill:cadetblue;stroke:none"></circle>
  <circle cx="90" cy="100" r="2" style="fill:cadetblue;stroke:none"></circle>
  <circle cx="10" cy="150" r="2" style="fill:cadetblue;stroke:none"></circle>
</svg>
S指令

描述

创建平滑的三次贝塞尔曲线，S指令需规定一个控制点和一个结束点，与T指令类似，其第一个控制点的位置应为其上一个控制点关于该结束点的对称点，如果上一个控制点不存在，则最后一个锚点的位置即为第一个控制点的位置；第二个控制点由S指令来规定；

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <path
        d="M20,20 S100,30,70,40 S120,150,60,120"
        style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"
        ></path>

  <!-- 控制点 -->
  <circle cx="100" cy="30" r="2" style="fill:brown;stroke:none"></circle>
  <circle cx="40" cy="50" r="2" style="fill:brown;stroke:none"></circle>
  <circle cx="120" cy="150" r="2" style="fill:brown;stroke:none"></circle>
  <line x1="100" y1="30" x2="40" y2="50" style="stroke:brown;"></line>
  <line x1="60" y1="120" x2="120" y2="150" style="stroke:brown;"></line>

  <!-- 锚点 -->
  <circle cx="20" cy="20" r="2" style="fill:cadetblue;stroke:none"></circle>
  <circle cx="70" cy="40" r="2" style="fill:cadetblue;stroke:none"></circle>
  <circle cx="60" cy="120" r="2" style="fill:cadetblue;stroke:none"></circle>
</svg>
A指令

描述

A指令用于绘制一段弧线，弧线实际是一个取自椭圆上两个点之间的弧，第一个点是路径最后一个锚点，第二个是结束点，弧线的细节由几个主要的参数控制

参数描述
rx椭圆长轴半径
ry椭圆短轴半径
xa椭圆与x轴的夹角
lf所取的弧大小，1取大弧，0取小弧
sf绘制弧线的方向，1顺时针绘制，0逆时针绘制
ex结束点的x坐标
ey结束点的y坐标

示例

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <text x="10" y="100" style="font-size:10;">xa=0,lf=0,sf=0</text>
  <path d="M30,30 A40,30,0,0,0,80,70"style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>

  <text x="120" y="100" style="font-size:10;">xa=50,lf=0,sf=0</text>
  <path d="M130,30 A40,30,50,0,0,180,70"style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>

  <text x="230" y="100" style="font-size:10;">xa=0,lf=1,sf=0</text>
  <path d="M250,30 A40,30,0,1,0,300,70"style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>

  <text x="10" y="190" style="font-size:10;">xa=0,lf=0,sf=1</text>
  <path d="M30,130 A40,30,0,0,1,80,170"style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>

  <text x="120" y="190" style="font-size:10;">xa=50,lf=1,sf=1</text>
  <path d="M130,130 A40,30,0,1,1,180,170"style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>
</svg>

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
游戏引擎学习第六天
（附源码）基于springboot 高校大学生学科竞赛管理系统-计算机毕设 53135
国家信息安全水平考试（NISP一级）最新题库-第十二章
迅狐短剧小程序源码：打造个性化的追剧体验
前端HTML5+CSS3静态页面开发-博文尚美
Java文件的读(写)汇总[ InputStream（Reader）、BufferedInputStream 、BufferedReader、FileInputStream、FileReader ]
定制开发 AI 智能名片 S2B2C 商城系统小程序：选择靠谱第三方开发商的重要性
Docker手册
电脑数据恢复软件哪个好？这六款软件轻松恢复数据
鸿蒙HarmonyOS实战开发：TypeScript-泛型【基础篇】
;