XML的SVG知识总结

你的名字 2022-05-12 10:08 314阅读 0赞

**1. SVG （Scalable Vector Graphic）可缩放矢量图形**

svg是使用 XML 来描述二维图形和绘图程序的语言，是个**行级标签**

场景：图标、图标icon、动效、矢量图（放大后不失真）

注意：canvas是js控件，运行性能比svg标签好

**2. svg在HTML中的用法**

（1）可以通过头部引入css文件（最好使用这种）

（2）可以写在style标签中

（3）可以写在标签中，style=“   ”

svg标签在body标签中，svg标签中还有其他的标签

在svg.css文件中，通过标签给svg以及svg内的标签写入样式

比如：

![70][]

![70 1][]

结果：

![70 2][]

**3. 标签的使用：**

（1）svg标签：svg标签是总标签，内部有其他标签，其他标签在svg内生效

**可添加标签有：直线、折线、矩形、多边形、圆形、椭圆、路径、文本**

**注意：图形都是默认填充的；尽量不要写单位，直接用数字。**

样式属性：fill/stoke：填充、描边颜色；（css样式可以当做标签属性，直接写在标签中）

stroke-width：描边的宽，线宽；

stroke-opacity/fill-opacity：描边和填充的透明度；

stroke-linecap：butt（默认）、round（两端补圆）、square（两端补块）；

stroke-linejoin：miter（默认）、round（圆角）、bevel（平角）；

stroke-dasharray：**值详解：第一个值线段**、第二个值间隔、然后线段、间隔、线段、间隔。。。

10px：线段长10px，间隔10px；![70 3][]

10px 20px：线段长10px，间隔20px；![70 4][]

10px 20px 30px：线段10px，间隔20px，线段30px，间隔10px，线段20xp，间隔30px；![70 5][]

**stroke-dashoffset：向左缩进的距离，注意这个属性结合stroke-dasharray时才有效果，因为，stroke-dasharray会将路径图形截断，通常情况下，路径图形是无限延伸的，那么用stroke-dashoffset，进行位移是没有效果的。**

**stroke-dashoffset：图形位置不变，只是将整个图形（包括延伸部分，左右都有无限延伸）进行移动，不结合stroke-dasharray,是没有效果的。**

**4. 直线：如上图，两点确定一条直线；**

<line x1=0 y1=50 x2=200 y2=50></line> 标签属性：x1 y1确定起始点；x2 y2确定终止点；

**5. 折线：注意标签属性points中点的写法**

polyline{
        fill:none;
        stroke: green;
        stroke-width: 5;
    }

**6. 矩形**

rect{
        fill:rgb(122, 62, 234);
        stroke:red;
        stroke-width:10;
    }

填充颜色：rgb；边的颜色stroke；边的宽度stroke-width；

![70 6][]

**7. 圆**

![70 7][]

![70 8][]

**8. 椭圆**

![70 9][]

![70 10][]

**9. 多边形**

![70 11][]

**10. 文本**

**注意：是以文字底部定位的，所以当纵坐标小于文字宽度（高度）的话，文字显示不完全。**

**位置和颜色、位置偏移**

![70 12][]

**（1）旋转属性：transform="rotate(90 20,40)"，度数+位置**

![70 13][]

**（2）路径上的文字：**

**<textPath>：通过di选择器选择路径的标签**

![70 14][]

![70 15][]

**注意：text文字起始位置，超出路径部分会被隐藏**

例子：起始位置（0,0），路径：path1

![70 16][]

![70 17][]

**（3）通过<tspan>标签，将text中的文字截断放在svg不同的位置**

![70 18][]

![70 19][]

（4）**超链接：注意默认样式**

![70 20][]

![70 21][]

**11. 路径：<path>**

详情：[http://www.runoob.com/svg/svg-path.html][http_www.runoob.com_svg_svg-path.html]

注意：<path d="M 10 170 L 100 10 h 20 v 20" fill="none" stroke="black"></path>

指令：大写是绝对定位，小写相对定位（相对上一个点的位置）

**（1）基本指令**

M：moveTo

L：lineTo

h：水平线，水平方向画多长；

v：垂直线，垂直方向画多长；

Z：闭合路径

![70 22][]

**（2）圆弧指令**

A：圆弧，共七个参数；rx轴半径、ry轴半径、旋转度数，正数是顺时针、0（小圆弧）| 1（大圆弧）、0（起点到终止点逆时针）| 1（起点到终止点顺时针）、x y（终止位置）；那么起始位置是什么？**上一个点。**

![70 23][]

![70 24][]

**（3）贝塞尔曲线**

1）二次贝塞尔曲线：Q x1 y1 x2 y2 确定了p1 p2两个点

2）二次本塞尔曲线延伸：T 跟在Q后面，确定第五个点，第一个点是：上一个点，第二第三个点：p1 p2 ，第四个点：p1p2的延长线长度=p1p2，第五个点：T确定；

![70 25][]

![70 26][]

3）三次贝塞尔曲线：C  x1 y1 x2 y2 x3 y3 确定三个点的位置

4）三次贝塞尔曲线延伸：S  x y   x'  y'确定第六个点、第七个点，第五个点是由（x2, y2）关于（x3 , y3）对称而得的

![70 27][]

小练习：

注意：标签g，指令d中的Q是二次贝塞尔曲线

![70 28][]

**12. 滤镜功能：**

**svg的滤镜功能是写好的，只需要filter内给id赋值，filter内调用对应的标签，如：高斯模糊：feGaussianBlur标签。使用的时候，标签调用对应的id值，即可实现滤镜效果**

**注意：stdDeviation的值越大，滤镜效果越明显。**

高斯滤镜：id="Gaussian\_Blur"，id的值是自定义的。

![70 29][]

![70 30][]

其他滤镜：

在 SVG 中，可用的滤镜有：

*  feBlend
 *  feColorMatrix
 *  feComponentTransfer
 *  feComposite
 *  feConvolveMatrix
 *  feDiffuseLighting
 *  feDisplacementMap
 *  feFlood
 *  feGaussianBlur
 *  feImage
 *  feMerge
 *  feMorphology
 *  feOffset
 *  feSpecularLighting
 *  feTile
 *  feTurbulence
 *  feDistantLight
 *  fePointLight
 *  feSpotLight

**13. svg渐变：**

**（1）线性渐变：**

原理：在svg上画一个图，图的fill样式引入一个写好的渐变背景，**注意<defs>标签**

![70 31][]

（2）径向渐变：

1）：<radialGradient id="bg2" cx=50% cy=50% r=50% fx=50% fy=50% > ：是作用在目标上，cx cy圆心在目标的中心；r：目标

的长宽的各50%的长度，渐变的长度；fx fy：渐变起始点的坐标

![70 32][]

[70]: /images/20220512/dfd60a86f93a49e5b0dbc731d8ebcdb8.png
[70 1]: /images/20220512/9a2a620a088340948f258e9309e7d220.png
[70 2]: /images/20220512/97c1d8d2f5be458985dc9bb44dad046c.png
[70 3]: /images/20220512/323a5017533b49f4a5a631d80263f939.png
[70 4]: /images/20220512/fad24c09ce5649dfb190d5074600d08c.png
[70 5]: /images/20220512/bb7678e1fbdd4405a234567acea9f532.png
[70 6]: /images/20220512/d3954378ee0c40b88d43bd636560b5d4.png
[70 7]: /images/20220512/7c6b4eb2e07749d9a96e70b663d9b991.png
[70 8]: /images/20220512/4f7c7157fc774e80bbf7d5383ef5804a.png
[70 9]: /images/20220512/81829b478ac64c27ac0df820de670c32.png
[70 10]: /images/20220512/20939a76858f436a87f858e25634d9da.png
[70 11]: /images/20220512/db60c1cca4694271bed4bb02d926e622.png
[70 12]: /images/20220512/27d97dd5f52c499b818e7246eaa806dd.png
[70 13]: /images/20220512/635ce0707ae6470ba31998c79aa298f2.png
[70 14]: /images/20220512/967ff10c4645420f837d6fa138e960ce.png
[70 15]: /images/20220512/91f476c5098d462dba66c6f0ae483302.png
[70 16]: /images/20220512/dcf7337ee2ce475baf69efcec0c65195.png
[70 17]: /images/20220512/b730513b3f4a4149a62d6dbd99a065d5.png
[70 18]: /images/20220512/de905530c3814b3fa87a0bfb5e41b5e4.png
[70 19]: /images/20220512/9bec1802bcb84d35945b3f6443a603fd.png
[70 20]: /images/20220512/f8c2e4cfa417454dae59e5fbae6cf99f.png
[70 21]: /images/20220512/a2a981621ab84541b0735fdfc62fd9aa.png
[http_www.runoob.com_svg_svg-path.html]: http://www.runoob.com/svg/svg-path.html
[70 22]: /images/20220512/a52e2d3184ab491caabf9ad106dd95f5.png
[70 23]: /images/20220512/f267fa50d9eb4901924a93683392e10a.png
[70 24]: /images/20220512/c37cb95752824df29e621b975de78ca2.png
[70 25]: /images/20220512/ec7752c0b50b407886cd8893c09b7d13.png
[70 26]: /images/20220512/c3355790919c44af91ca9dc15c6b83e7.png
[70 27]: /images/20220512/0e6ae317f45844cab4ff448b4c92e86c.png
[70 28]: /images/20220512/92b3000d84024835b065f63b906f2e5c.png
[70 29]: /images/20220512/42e18e564f434dbd8cbc857ac004ba8a.png
[70 30]: /images/20220512/72a0c9b5c3304a5692e6e927b024565b.png
[70 31]: /images/20220512/6394d854092340408a637b77b6f4e01a.png
[70 32]: /images/20220512/20d9e1a304d9413c8d2a04d778d32075.png