# svg **Repository Path**: dev-edu/svg ## Basic Information - **Project Name**: svg - **Description**: svg完整课程资料。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 11 - **Forks**: 30 - **Created**: 2023-09-06 - **Last Updated**: 2025-06-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README **渡一教育svg技术学习（dmc）** # SVG # 一 基础篇 ## 1 概述 **S**calable **V**ector **G**raphics(可缩放的矢量图形) > **图形和图像** * 图形 ： 是由 被称为矢量的数学对象 所定义点，线，面等所描绘而成。 * 图像 ： 又称为栅格图，点阵图，位图或像素图，用像素描述图像中每一个点颜色和亮度等信息。 > **svg特点** svg使用xml绘制图形 （canvas绘制图形） * 可以使用文本编辑器创建和修改图形。 * 因为是描述的图形， 浏览器会根据描述来绘制图形，而不是使用像素填充空间，所以svg适合不同大小的屏幕。 * 因为是xml语言描述的图形， 图形中的部分都是由标签组成，其中每一个标签都可以使用javascript和css控制与交互。 * 同时svg提供了强大的滤镜功能，可以绘制更逼真，更复杂的图形效果。 * 2003成为w3c标准， 目前绝大多数的浏览器都支持svg绘图。 * 目前在可视化领域使用非常频繁，svg可以单独使用，也可以和d3 , echarts等技术配合应用。 * 也是解决网站图标问题的最佳解决方案 > **svg 与 canvas绘图的差异** | SVG | Canvas | | ---------------------------------- | -------------------------------------- | | 2003成为w3c标准 | html5新标签 | | 绘制矢量图 | 绘制位图 | | 放缩不会导致失真 | 放缩会导致失真 | | 对（图形）标签进行操作，方便，灵活 | 对像素点进行操作，效果更细腻，不易操作 | | 交互性强，容易实现动画 | 动画逻辑实现复杂 | | 存在一定的性能问题 | 性能略高一些 | | 适合绘制地图，图标等 | 适合绘制图表，制作游戏。 | | 不易绘制3d图形 | 提供了绘制3d图形的api | ## 2 svg使用 **浏览器直接打开** > svg本身是xml语法文件，需要指定渲染规则才可以显示图形效果 > > `` **嵌入html网页** 1. 使用``引入 ，无法引入源码， 不能通过css和js操作 ```html ``` 2. 直接嵌入svg源码 3. 使用` ``` 4. 使用``引入 ```html ``` > 使用iframe和object引入时，需要注意同源问题，否则无法通过js获得内部document对象。 > > 实际开发中不推荐优先使用， ## 3 svg准备 ### 1） 坐标系 绘制了 100 * 100 坐标系。 左上角原点（0,0） ， 向右为x正轴，向下为y正轴 这个坐标系对我们接下来的图形绘制没有任何影响，只是方便观察。 1680602173270 ### 2）了解svg根元素 **svg标签位置** 写在.svg文件中，作为根标记，要求有且只有一个。 写在.html文件中，可以写多个标记，表示嵌入了多个svg图片 ， 每一个svg都是一个独立的区域。 **坐标系** svg中每一个图形的绘制都会基于一个坐标系（系统），隐式。 > 这是真正的坐标系，上面绘制的坐标系只是基于真实坐标系形成的图形，方便理解。 **viewBox属性** 视图窗口，装载绘制的图形。 可以装载整个图形，也可以装载部分图形。通过x y width height 四个属性值来控制 - width和height用来设置窗口的宽高 - x和y设置窗口起始的位置。如果x和y为负， 最终的装载的结果相当于图形向右向下。 ```xml ``` 1680602415457 **width和height属性** 设置视口区域的大小，设置可视区域的大小 viewbox窗口装载完的图形，需要在视口展示 在没有设置viewbox的情况下， viewbox装载的区域和视口区域相同 如果设置了viewBox，且装载区域的大小与可视区域的大小不同，此时就会按照比例，对装载区域图形放大或缩小展示 > 通过坐标系，绘制了（100,100） r=100 > > 设置窗口装载100,100范围，装载了1/4的圆，也就是左上角的圆 > > 将窗口中这1/4个圆，放到400*400范围的视口中展示，最终这1/4圆会放大4倍展示 * 可以合理的利用viewBox和width与height实现图形的放缩 1680602581529 ### 3） svg插件 SVG 支持标签补全，属性补全等。 必须以`<`开始 SVG Snippets 支持标签名补全标签。 SVG Preview 预览svg效果 ## 4 基本图形 ### 1）矩形 ```xml ``` x 和 y 坐标系中的起始坐标 width 和 height设置矩形的宽高 1680763280801 > 矩形默认有一个黑色的填充（背景色），可以使用fill 和 stroke属性设置填充颜色和边框颜色 > > fill="none" 没有填充颜色 > > 所有图形都有fill 和 stroke属性。 使用rx 和 ry 设置圆角半径 ```xml ``` 1680763300587 ### 2）圆形 ```xml ``` cx 和 cy 在坐标系设置原点 r 设置圆的半径 1680763325284 **案例：圆形和矩形配合，体现矩形圆角的设置** ```xml ``` 1680763338085 ### 3）椭圆形 ```xml ``` cx 和 cy 在坐标系设置原点 rx 和 ry 设置x轴半径和y轴半径 * 圆形任意方向的半径相同 * 椭圆形， 分为长轴半径和短轴半径 1680763379787 ### 4）线条 ```xml ``` x1 y1 和 x2 y2 设置线段的两个坐标点， 两点之间绘制线段。 需要设置线条的颜色和粗细 1680763409003 > fill属性失效 ### 5）折线 多个点，一次绘制直线，最终形成一个折线效果 ```xml ``` points 设置多个点的坐标值集合。 集合数值一定是偶数。 每一对表示一个点在坐标，每一个值可以使用【空格】或【逗号】隔开 需要描边才会显示折线效果 1680763469045 > 除直线效果以外， 其实坐标和终止坐标之间会形成一个合围区域， 默认有填充颜色。 ### 6）多边形 ```xml ``` 多边形与折线的绘制类似，不同在于终端节点和起始节点自动联通，完成闭合，并有默认颜色填充。 1680763503852 ### 7）【小任务】 1680751745483 ## 5 path路径绘制 根据点连接，绘制各种图形 支持直线（线段，折线，矩形，多边形），曲线（贝塞尔曲线，弧线） ### 1）绘制直线 ```xml ``` d 属性 类似于 折线（多边形）中的points属性， 可以设置多个坐标点。 由于path可以设置不同的图形（曲线），不仅仅是直线。 所以两个坐标的连接会有不同的关键字表示 接下来直线相关的关键字： * M: "Move To" 设置笔触所在的起始位置（要从哪个坐标位置开始画） * L："Line To" 画一条直线到指定的坐标位置 1680763552853 > 多个M。 在一个path路径绘制的图形中，可以设置多个M，实现移动笔触，从多个点进行绘制 ```XML ``` 1680763629356 > H 和 V 关键字。H只需要指定横坐标， 表示横向画线。 V只需要指定纵坐标， 表示纵向画线 ```xml ``` 1680763681482 > Z 放在最后，不需要跟坐标，表示首位坐标闭合 ```xml ``` 1680763714190 > 上述的关键字大小写含义不同 > > M10 10 L20 20 从(10,10)点 向(20,20)点画直线 — 绝对位置 > > M10 10 l20 20 从(10,10)点，新位置距原位置x轴距离为20， y轴距离20 — 相对位置 ```xml ``` ```xml ``` 1680763760836 ### 2）绘制弧线 圆上两点之间的部分称为**圆弧** **绘制原理：**定义两个点和一个圆，这个圆在绘制过程中会自动的经过两个点，从而形成了弧。 1681097175500 **绘制条件：** 1. 确定两个点(x1,y1)和(x2,y2) 2. 确定圆的半径rx 和 ry （正圆或椭圆），不需要确定圆心，因为上面定义的两个点就可以大约确定圆的位置了 **注意1：**两点的距离只要<直径，就会产生两个位置的圆（偏上，偏下） **注意2：**两个圆会产生4个弧 **注意3：**有一种特殊情况，就是两个点恰好是直径上的两个端点，就只会形成一个圆，2个弧。 3. 确定画弧的方向，顺时针或逆时针方向，每个方向都可能绘制出两个弧。 4. 确定绘制弧的大小，大弧或小弧 5. 确定圆的旋转角度。对(椭)圆进行旋转，使得旋转后的圆经过定义的两点，从而形成更特别的弧 1681098187277 **使用A关键字实现弧形的绘制** ```txt "A rx ry rotate旋转角度 arc-flag弧大小状态(0/1) sweep-flag绘制方向(0/1) x2 y2" ``` > A关键字绘制弧线的时候，不能指定起始点坐标。起始点坐标是由之前的绘制决定的。 比如M,L > arc-flag 0表示小弧， 1表示大弧 > > sweep-flag 0表示逆时针， 1表示顺时针 ```xml ``` 1681101565633 ```xml ``` 1681101609617 ```xml ``` 1681101652834 ### 3）绘制曲线 svg支持的是贝塞尔曲线绘制 （二次贝塞尔曲线，三次贝塞尔曲线） 贝塞尔曲线简单来说，是由2个起点终点 和 n个控制点配合绘制出的曲线图形 二次贝塞尔和三次贝塞尔，表示有1个控制点 和 2个控制点。 **二次贝塞尔曲线的绘制原理：** 需要确定一个起点坐标p0和一个终点坐标p2，再确定一个控制点坐标p1。 依次连线p0p1 , p1p2 确定一个参数t [0.0,1.0] 在p0p1上确定一个点p01 , 使得 p0与p01之间的距离/p0与p1之间的具体 = t 同时在p1p2上确定一个点p12，使得 p1与p12之间的距离/p1与p2之间的具体 = t 连接p01和p12 在p01p12线段上再确定一个点p02,使得 p01与p02之间的距离/p01与p12之间的具体 = t 按照上述规律，当t在0-1之间变化时，就可以获得n多个p02点，这n个连续的p02就会形成一个光滑的曲线 1681109205909 **三次贝塞尔曲线绘制原理：** 与二次贝塞尔的绘制机制相同，只不过经过的线段和点会比二次贝塞尔曲线多一些。 两个起始点和终点p0,p3两个控制点p1,p2 按照比例t，在p0p1中找到p01，在p1p2中找到p12 , 在p2p3中找到p23 按照比例t，在p01p12中找到p02 , 在p12和p23中找到p13 按照比例t，在p02p13中找到p03. 在t变化时，会有n个连续的p03，形成曲线。 1681117186446 **使用Q关键字绘制二次贝塞尔曲线** ```xml ``` > 与弧线绘制时相同，起始点坐标不在Q关键字中设置，而是由上一次的绘制结尾，或M控制。 > > 所以Q关键字中，只设置控制点 和 终点坐标。 1681111990882 > 使用T关键字，在曲线后跟着绘制一个斜率对称的连续的二次贝塞尔曲线 > > 紧跟着的这个二次贝塞尔曲线不需要设置控制点， 是由前一个曲线的控制点对称而来，只需要设置终点坐标 ```xml ``` 1681112001793 **使用C关键字绘制三次贝塞尔曲线** ```xml ``` 1681112937626 > 使用S关键字，绘制连续的三次贝塞尔曲线。 与T关键字类似 > > 第一个控制点不需要设置，由上一次曲线的控制点对称获得。只需要提供第二个控制点和终点即可。 ```xml ``` 1681112948496 ### 4【小任务】 ![1681182053351](images/29.png) ## 6 填充与描边 ### 1）fill 填充属性 fill ：图形区域的颜色填充（背景颜色） fill-opacity : 设置填充颜色的透明度 fill-rule ： 设置图形绘制过程中，重叠部分的所属规则 * 通过一些规则，确定重叠的区域是否属于当前图形，从而使得填充有效或失效 * `fill-rule="nonzero"`按照顺时针绘制图形时经过这片区域，计数器+1，逆时针绘制图形时经过这片区域，计数器-1，最终的结果为0，表示重叠区域不属于图形（fill失效）。结果非0，表示重叠区域属于图形（fill生效） * `fill-rule="evenodd"` 绘制过程中，经过一次区域，计数器+1. 最终的数量为奇数，表示在图形内，偶数表示在图形外 ```xml ``` 1681194514248 ```xml ``` 一共绘制了三个圆，分别为圆30，圆40，圆45 顺时针绘制圆30时，圆30区域+1=1，圆40区域+1=1 ， 圆45区域+1=1 逆时针绘制圆40时，圆30区域=1 ， 圆40区域-1=0 ， 圆45区域-1=0 顺时针绘制圆45时，圆30区域=1，圆40区域=0，圆45区域+1=1 非0表示在图形内，fill生效； 0表示在图形外，fill失效。 1681194727176 ```xml ``` 绘制圆30时， 圆30区域+1=1 ， 圆40区域+1=1 ， 圆45区域+1=1 绘制圆40时，圆30区域=1 ， 圆40区域+1=2 ， 圆45区域+1=2 绘制圆45时，圆30区域=1，圆40区域=2，圆45区域+1=3 奇数表示在图形内，fill生效；偶数表示在图形外，fill失效 1681194944814 ### 2）stroke 描边属性 stroke : 设置描边颜色（边框） stroke-width : 设置描边粗细 stroke-opacity : 设置描边颜色的透明度 stroke-linecap : 设置线段两端的形状 * butt 直边（默认） * round 圆角边 * square 视觉效果与butt类似， 两端使用了矩形形状。 与butt效果相比会长出一块。 ```xml ``` 1681198982977 stroke-linejoin : 设置折线连接点的形状 * miter 尖的（默认） * round 圆 * bevel 平的 ```xml ``` 1681199034957 stroke-dasharray : 使用虚线设置描边，并设置虚线及空白的长度 * `stroke-dasharray="10"`每一段线长度为10，两段线之间的空白为10 * `stroke-dasharray="10 5"`每一段线长度为10，两段线之间的空白为5 * `stroke-dasharray="10 5 10"` 设置时后面的长度会复制前面的数值 10 5 10 10 5 10 10 5 10 ```xml ``` 1681199145877 stroke-dashoffset : 配合虚线描边属性 ， 设置虚线开始的位置（偏移） * 正数向左偏移， 负数向右偏移 * 可以用来实现动态文字效果。 ```xml ``` 1681199208926 ## 7 CSS控制SVG 使用CSS设置SVG的效果属性 （fill ，stroke） * 主要就是对fill 和 stroke系列设置 * 还允许对r ， cx ，cy , x , y属性进行设置 * 有些属性css不支持，d ， points ， x1 y1 , x2 y2 ```html ``` 1681203889749 将CSS属性效果应用在SVG上 * 绝大多数的css效果，都可以作用在svg上面。 （动画，渐变，效果） * 关于背景和边框，要使用SVG提供的属性 fill 和 stroke 。 background和 border无效。 * after 和before伪类样式也是不支持的。 ```html ```