【笔记】【SVG】SVG-菜鸟编程-学习笔记
前言
此笔记为本人在菜鸟编程学完SVG之后，对所学知识进行的整理。
此笔记用于记录本人在学习中还有不懂以及值得注意的地方。以方便日后的工作与学习。
笔记中有些个人理解后整理的笔记，可能有所偏差，也恳请读者帮忙指出，谢谢。
注意
此笔记相对精炼，请读者结合平台学习更佳
学习平台：SVG 教程-菜鸟编程
什么是SVG？
- Scalable Vector Graphics（可伸缩矢量图形）
- 用于网络，基于矢量的图形
- 用 XML 格式定义图形
- 不失帧
- 使用
.svg（全部小写）作为SVG文件的扩展名。
格式：
<svg version="" baseProfile="" width="" height="" xmlns="">
<!--svg内容-->
</svg>
<svg>：根元素
width和height：SVG文档的宽度和高度
version：使用的 SVG 版本
xmlns：SVG 命名空间
HTML引入SVG
方法比较
使用 embed标签 |
使用 object标签 |
使用 iframe 标签 |
|
|---|---|---|---|
| 浏览器支持 | 所有 | 所有 | 所有 |
| 脚本使用 | 允许 | 不允许 | 允许 |
| HTML4和XHTML | 不推荐 | 支持 | 不推荐 |
| HTML5 | 允许 | 支持 | 允许 |
具体用法
方法一：embed标签引入
<embed src=".svg文件名带后缀" type="image/svg+xml" />
方法二：object标签引入
<object data=".svg文件名带后缀" type="image/svg+xml"></object>
方法三：iframe标签引入
<iframe src=".svg文件名带后缀"></iframe>
方法四：直接在HTML嵌入SVG代码
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!--SVG内容-->
</svg>
方法五：a标签链接到SVG文件
<a href=".svg文件名带后缀">查看 SVG 文件</a>
SVG内容速览
| 标签名 | 描述 |
|---|---|
| rect | 矩形 |
| circle | 圆 |
| ellipse | 椭圆 |
| line | 直线 |
| polygon | 多边形 |
| polyline | 多段线 |
| path | 路径 |
| text | 文本 |
SVG标签通用属性
| 属性名 | 描述 |
|---|---|
| width | 宽度 |
| height | 高度 |
| fill | 背景色 |
| stroke | 边框颜色 |
| stroke-width | 边框宽度 |
| style | 定义CSS属性 |
SVG常用元素
rect（矩形）
格式：
<rect x="可选" y="可选" rx="可选" ry="可选" width="" height="" style=""/>
特殊属性：
x：矩形的左侧位置（矩形的左边框与浏览器窗口左边界的距离）
y：矩形的顶端位置（矩形的上边框与浏览器窗口上边界的距离）
rx和ry：可使矩形产生圆角。
额外拓展：
CSS属性：
fill-opacity：填充颜色透明度（合法的范围是：0 - 1）stroke-opacity：轮廓颜色的透明度（合法的范围是：0 - 1）opacity：元素的透明值 (范围: 0 到 1)。
circle（圆）
格式：
<circle cx="" cy="" r="" fill="" />
特殊属性：
cx：圆心的x坐标
cy：圆心的y坐标
r：半径
注意：如果忽略cx和cy，圆心默认被设置为（0，0）
ellipse（椭圆)
格式：
<ellipse cx="" cy="" rx="" ry="" style=""/>
特殊属性：
cx：椭圆中心的x坐标
cy：椭圆中心的y坐标
rx：水平半径
ry：垂直半径
line（直线）
格式：
<line x1="" y1="" x2="" y2="" style=""/>
特殊属性：
x1：x 轴定义线条的开始
y1： y 轴定义线条的开始
x2：x 轴定义线条的结束
y2： y 轴定义线条的结束
polygon（多边形）
格式：
<polygon points="x1,y1 x2,y2 ... xn,yn" style=""/>
特殊属性：
points：定义多边形每个角的 x 和 y 坐标，用空格隔开
额外拓展：
CSS属性：
- fill-rule(图形填充规则)
- 判断一点在内部还是外部
- 1、从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。
- 2、
属性值 描述 判断规则 nonzero（默认值） 非零 从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。 evenodd 奇偶 交点数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部 inherit
polyline（多段线）
格式：
<polyline points="x1,y1 x2,y2 ... xn,yn" style=""/>
points：定义多段线每个点的 x 和 y 坐标，用空格隔开
path（路径）
格式：
<path d="M开始数据 路径数据1 路径数据2 ... Z" />
路径数据=路径数据命令+点坐标(坐标x和y用空格隔开)
路径数据命令：
| M | L | H | V | C |
|---|---|---|---|---|
| 开始 | 直线达到 | 水平线达到 | 垂直线达到 | 弯曲线达到 |
| S | Q | T | A | Z |
| 平滑曲线达到 | 关闭路径 |
text（文本）
格式：
<text x="" y="" fill="" transform="">文本内容</text>
特殊属性：
x和y：与矩形的属性一样就不过多赘述了
transform：与CSS3transform属性一样【了解更多】
Stroke 属性
| 属性名 | 描述 |
|---|---|
| stroke | 定义一条线，文本或元素轮廓颜色 |
| stroke-width | 轮廓厚度 |
| stroke-linecap | 不同类型的开放路径的终结（设置相同的重点） |
| stroke-dasharray | 创建虚线 |
SVG滤镜元素
- 滤镜=特殊效果
defs元素：- 所有互联网的SVG滤镜都用该元素定义
- 定义短并含有特殊元素（如滤镜）定义。
filter标签：- 定义SVG滤镜
- 使用id属性来定义向图形应用哪个滤镜
格式：
<svg>
<defs>
<filter id="">
<!--滤镜内容-->
</filter>
</defs>
</svg>
注意：上述代码只是为了让读者了解大致结构，有些元素省略
滤镜内容
feGaussianBlur（模糊效果）
格式：
<
属性：
in：
stdDeviation：模糊量
filter="url(#id)"：将常用元素的滤镜属性与设置的滤镜效果实现（前提滤镜要能实现，而且有单独用id或class标识）
示例:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
效果：
feOffset（阴影）
格式：
<feOffset result="offOut" in="" dx="" dy=""/>
实现思路：注意：以下代码只是步骤中的关键代码，具体实现看源代码
-
步骤一：初步平移
<feBlend in="SourceGraphic" in2="offOut" mode="normal" /> -
步骤二：模糊偏移图像
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> -
步骤三：修改模糊偏移图像颜色
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />修改了
in属性的值 -
步骤四：阴影上在涂上一层颜色
<feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />对这个句关键代码不了解的可以看原文底下的评论区有做详细的解释
~Gradient（渐变）
- 渐变：一种从一种颜色到另一种颜色的平滑过渡。
linearGradient（线性渐变）
格式：
<linearGradient id="" x1="" y1="" x2="" y2="" >
<stop offset="" style="stop-color:rgb( , , );"/>
<stop offset="" style="stop-color:rgb( , , );"/>
</linearGradient>
特殊属性：
x1和y1：开始位置
x2和y2：结束位置
| 线性渐变类型 | 实现 |
|---|---|
| 水平渐变 | y1和y2相等，而x1和x2不同时 |
| 垂直渐变 | x1和x2相等，而y1和y2不同时 |
| 角形渐变 | x1和x2不同，且y1和y2不同时 |
stop标签：定义渐变颜色
radialGradient （放射性渐变）
格式：
<radialGradient id="" cx="" cy="" r="" fx="" fy="">
<stop offset="" style="" />
<stop offset="" style=""/>
</radialGradient>
特殊属性：
cx和cy：定义最外层圆
fx和fy：定义最内层圆
额外学习
结语
感谢菜鸟编程提供学习的平台
感谢各位读者能看到最后
