SVG在前端中的常见应用

• 一、svg标签
• • 1. svg
  • 2. g
  • 二、描边属性
  • 三、模糊和阴影效果
  • • 1. 模糊
    • 2. 阴影效果
    • 四、线性渐变和径向渐变
    • • 1. 线性渐变
      • 2. 径向渐变
      • 五、绘制
      • • 1. 内置形状元素
        • 2. 绘制矩形
        • 3. 绘制圆形
        • 4. 绘制椭圆
        • 5. 绘制线条
        • 6. 绘制多边形
        • 7. 绘制多线条
        • 8. 绘制文本
        • 9. 绘制路径

          只是一些常用的应用，但足以入门。

          一、svg标签

          1. svg

          • svg标签相当于画布。
          • 可以在标签中定义宽和高

            2. g

            • g 标签可以对svg元素进行分组，分组后可以统一配置属性。

              二、描边属性

              • stroke：笔画颜色属性，值为颜色值
              • strike-width：笔画宽度属性，值为数值
              • stroke-linecap：笔画笔帽属性
                • butt：默认值，没有线帽。
                • round：圆形线帽。
                • square：方形线帽。
                • stroke-dasharray：笔画虚线属性，值为数组序列，至少2个值。

                  

                  • 所有的描边属性都可以应用于线条、文本、元素轮廓。
                  • 下面会大量运用。

                    三、模糊和阴影效果

                    • 给 svg 添加特殊效果需要添加 实现，且在 （definitions）中定义。
                    • filter 里面包含一个或多个效果（过滤器）滤镜。
                    • filter 属性：
                      • id：识别过滤器。
                      • x：滤镜起始点x坐标
                      • y：滤镜起始点y坐标
                      • width：滤镜宽
                      • height：滤镜高

                        1. 模糊

                        • feGaussianBlue 定义高斯模糊。
                        • 定义在 filter 里面。
                        • feGaussianBlue 属性：
                          • stdDeviation ：定义模糊数量，值为数值，值越大越模糊。

                            

                            2. 阴影效果

                            • 阴影效果通过 feOffset 和feBlend 实现。
                            • 定义在 filter 里面。
                            • feOffset 定义偏移，属性：
                              • dx：阴影在x轴上的偏移，值为数值。
                              • dy：阴影在y轴上的偏移，值为数值。
                              • in：表示阴影图像的来源。（SourceAlpha黑色阴影，SourceGraphic图像阴影）
                              • feBlend在偏移图像上混合原始图像，属性：
                                • in：值为SourceGraphic。

                                  

                                  四、线性渐变和径向渐变

                                  1. 线性渐变

                                  • 线性渐变通过 实现，且在 中定义。
                                  • linearGradient属性：
                                    • id
                                    • x1：线性渐变开始位置x坐标
                                    • y1：线性渐变开始位置y坐标
                                    • x2：线性渐变结束位置x坐标
                                    • y2：线性渐变结束位置y坐标
                                    • 线性渐变可以由多个颜色组成，每个颜色用一个 指定。
                                    • stop 属性：
                                      • offset：开始和结束位置，值为百分比
                                      • stop-color：颜色。

                                        

                                        2. 径向渐变

                                        • 径向渐变通过 实现。
                                        • 属性：
                                          • id
                                          • cx, cy，r：定义最外面的圆（渐变结束圆圆心横坐标、纵坐标、半径）
                                          • fx，fy：定义最里面的圆（渐变起始点横坐标、纵坐标）

                                            

                                            五、绘制

                                            1. 内置形状元素

                                            • 元素：矩形 rect、圆形 circle、椭圆 ellipse、线条 line、多线条 polyline、多边形 ploygon、路径 path。
                                            • 坐标系

                                              

                                              2. 绘制矩形

                                              • 使用标签 rect。
                                              • 属性：
                                                • 宽度 width
                                                • 高度 height
                                                • 填充色 fill
                                                • 笔画颜色 stroke
                                                • 笔画宽度 stroke-width。

                                                  

                                                  • （接上）属性：
                                                    • x：左边位置
                                                    • y：顶部位置
                                                    • fill-opacity：填充不透明度，为0-1
                                                    • stroke-opacity：笔画不透明度。
                                                    • opacity：整个矩形的不透明度。

                                                      

                                                      • （接上）属性：
                                                        • rx：圆角x轴方向上的半径长度。
                                                        • ry：圆角y轴方向上的半径长度。

                                                          

                                                          3. 绘制圆形

                                                          • 使用标签
                                                          • 属性：
                                                            • cx：圆心x轴坐标，默认0
                                                            • cy：圆心y轴坐标，默认0
                                                            • r：圆半径。
                                                            • stroke、stroke-width、fill。

                                                              

                                                              4. 绘制椭圆

                                                              • 使用标签
                                                              • 属性：
                                                                • cx、cy。
                                                                • rx：水平半径
                                                                • ry：垂直半径。

                                                                  

                                                                  • 堆叠椭圆

                                                                    

                                                                    • 空心椭圆

                                                                      

                                                                      5. 绘制线条

                                                                      • 使用标签
                                                                      • 属性：
                                                                        • x1：起点x坐标
                                                                        • y1：起点y坐标
                                                                        • x2：终点x坐标
                                                                        • y2：终点y坐标

                                                                          

                                                                          6. 绘制多边形

                                                                          • 使用
                                                                          • 用于创建一个至少三个边的图形。
                                                                          • 属性：
                                                                            • points：定义每个角的（x, y）坐标，至少三队坐标。

                                                                              

                                                                              • 绘制五角星

                                                                                

                                                                                7. 绘制多线条

                                                                                • 使用
                                                                                • 创建任何只由直线组成的形状
                                                                                • 属性：
                                                                                  • points：同上

                                                                                    

                                                                                    8. 绘制文本

                                                                                    • 使用 ...
                                                                                    • 属性
                                                                                      • x：文本x坐标
                                                                                      • y：文本y坐标
                                                                                      • font-size：文本大小
                                                                                      • text-anchor：对齐方式（start | middle | end）
                                                                                      • stroke、stroke-width、fill

                                                                                        

                                                                                        • （接上）属性：
                                                                                          • transform
                                                                                            • rotate(旋转角度 旋转中心x, 旋转中心y)。默认（x, y）为（0, 0）。

                                                                                              

                                                                                              • text 元素可以包裹多个 tspan，每个tspan可以包含不同的格式和位置。
                                                                                              • tspan属性：
                                                                                                • x、y

                                                                                                  

                                                                                                  • text标签可以添加链接。使用a包裹起来。要添加文本需要给svg添加xmlns:link属性，属性值固定为w3的地址。
                                                                                                  • a 属性：
                                                                                                    • xlink:href：链接地址
                                                                                                    • target：跳转方式

                                                                                                      

                                                                                                      9. 绘制路径

                                                                                                      • 使用
                                                                                                      • 可以绘制任意形状的图形
                                                                                                      • 属性：
                                                                                                        • d：draw，定义绘制路径的命令。命令大写表示绝对定位，小写表示相对定位。
                                                                                                          • 命令 M/m：moveto缩写，定义起点坐标（x, y）
                                                                                                          • 命令 L/l：lineto缩写，绘制一条线。
                                                                                                          • 命令 q：quadraticBezierCurve缩写，绘制二次贝塞尔曲线。定义控制点和终点坐标。
                                                                                                          • 绘制二次贝塞尔。