XML的SVG知识总结

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内的标签写入样式

比如：

结果：

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；

10px 20px：线段长10px，间隔20px；

10px 20px 30px：线段10px，间隔20px，线段30px，间隔10px，线段20xp，间隔30px；

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 points="20,20  40,25  60,40  80,120  120,140  200,180"></polyline>

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

6. 矩形

<rect x=20 y=20 width=100 height=100></rect>

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

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

7. 圆

<circle cx=100 cy=100 r=40></circle>

8. 椭圆

<ellipse cx=100 cy=100 rx=50 ry=30></ellipse>

9. 多边形

<polygon points="100,10 150,190 160,110"></polygon>

10. 文本

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

位置和颜色、位置偏移

<text x="50" y="50" fill="red"  dx=-30 dy=-20>I love SVG</text>

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

<text x="50" y="50" fill="red" transform="rotate(90 20,40)">I love SVG</text>

（2）路径上的文字：

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

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

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

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

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

11. 路径：<path>

详情：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：闭合路径

<path d="M100 50 L75 180 H 125 V 100 z" fill="none" stroke="red"></path>

（2）圆弧指令

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

<path d="M 50 100 A  15          30                       45              0          0                            80 150" fill="none" stroke="red"></path>

在                             x轴半径  | y轴半径  | 顺时针旋转45度 | 小圆弧 | 逆时针方向的  |   终止点坐标位置   

（3）贝塞尔曲线

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

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

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

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

    <svg>
            <path d="M153 334
            C153 334 151 334 151 334
            C151 339 153 344 156 344
            C164 344 171 339 171 334
            C171 322 164 314 156 314
            C142 314 131 322 131 334
            C131 350 142 364 156 364
            C175 364 191 350 191 334
            C191 311 175 294 156 294
            C131 294 111 311 111 334
            C111 361 131 384 156 384
            C186 384 211 361 211 334
            C211 300 186 274 156 274"
            style="fill:white;stroke:red;stroke-width:2"/>
    </svg>

小练习：

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

    <svg>
        <!-- 四条线段 -->
        <path id="lineAB" d="M 10 190 L 100 10" stroke="red" stroke-width="3" fill="none" stroke-linecap="round"></path>
        <path id="lineBC" d="M 100 10 L 190 190" stroke="red" stroke-width="3" fill="none" stroke-linecap="round"></path>
        <path id="line" d="M 55 100 L 145 100" stroke="green" stroke-width="3" fill="none" stroke-linecap="round"></path>
        <path id=" quadraticBézier" d="M 10 190 Q 100 10 190 190" stroke="blue" stroke-width="3" fill="none" stroke-linecap="round"></path>
        <!-- 三个圆圈 -->
        <g fill="black">
            <circle id="pointA" cx="10" cy="190" r="3" />
            <circle id="pointB" cx="100" cy="10" r="3" />
            <circle id="pointC" cx="190" cy="190" r="3" />
        </g>
        <!-- 三个字母 -->
        <g font-size="20" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
            <text x="10" y="190" dx="15">A</text>
            <text x="100" y="10" dy="30">B</text>
            <text x="190" y="190" dx="-20">C</text>
        </g>
    </svg>

12. 滤镜功能：

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

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

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

    <svg>
        <defs>
            <filter id="Gaussian_Blur">
                <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
            </filter>
        </defs>

        <ellipse cx="100" cy="100" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;
        stroke-width:2;filter:url(#Gaussian_Blur)" />
    </svg>
    <img src="./0.jpg" style="filter:url(#Gaussian_Blur); width:200px;height:200px;" alt="">

 

其他滤镜：

在 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>标签

<svg style="width: 200px;height: 200px;border: 1px solid black;">
        <defs>
            <linearGradient id="bg1" x1=0 y1=0 x2=0 y2=100%>
                <stop offset=0% style="stop-color:rgb(180,224,65)"></stop>
                <stop offset=100% style="stop-color:rgb(122,163,190)"></stop>
            </linearGradient>
        </defs>
        <rect x=0 y=0 width=200 height=200 style="fill:url(#bg1)"></rect>
</svg>

（2）径向渐变： 

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

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

 <svg style="width: 200px;height: 200px;border: 1px solid black;">
        <defs>
            <radialGradient id="bg2" cx=50% cy=50% r=50% fx=70% fy=70% >
                <stop offset=0% style="stop-color:red"></stop>
                <stop offset=100% style="stop-color:green"></stop>
            </radialGradient>
        </defs>
        <rect x=0 y=0 width=100 height=100 style="fill:url(#bg2)"></rect>
    </svg>