创建svg 文件

1 
     
      2   xmlns='http://www.w3.org/2000/svg'  #标头 必须 　　# SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显 　  # viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度 此处的值与 path 路径的值相关连 3   viewBox='0 0 64 64'    　　 version="1.1" #版本号 4   width='64' height='64'　　#svg 大小尺寸 如果想图像形状不变，只改变大小 修改 width height 5   fill='currentcolor'>　　　#填充颜色 6   
       #path 路径 这个地方可以放 svg 的子标签 7 
     

  详解viewBox  

形状

　  标签内的值可以是百分比，也可以直接是数值

• 矩形 <rect>
  •  必选： width height  # 宽高
  •  可选： x  y  stroke style fill  rx ry
    • x ,y 画布的起始 x y 位置 （例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
    • rect 元素的 width 和 height 属性可定义矩形的高度和宽度
    • style 属性用来定义 CSS 属性
    • CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
    • CSS 的 stroke 属性定义矩形边框的
    • rx ,ry 图像圆角
• 圆形 <circle>
  • 必选：r  #属性定义圆的半径
  • 可选：cx  cy
    • cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
• 椭圆 <ellipse>
  • 必选：rx  ry #椭圆中心的x y 坐标
  • 可选：cx cy
    • CX属性定义的椭圆中心的x坐标； 如果省略cx和cy，圆的中心会被设置为(0, 0)
    • CY属性定义的椭圆中心的y坐标
• 线 <line>
  • 必选：x2 y2 可选：x1 y1  ( 默认 起始位置  x1=0 y1=0)
    • x1 属性在 x 轴定义线条的开始
    • y1 属性在 y 轴定义线条的开始
    • x2 属性在 x 轴定义线条的结束
    • y2 属性在 y 轴定义线条的结束
• 多边形 <polygon>
  • 必选：polygon  至少 2组点
    •  points 点的坐标 每两个算是一组 组与组之间可以使用逗号做间隔
    • 折现的交换点在线段末尾的中心点(将绘制的线段放大可以观察到)并且在闭合路径(将结束点设置为起始点 )的时候会出现问题
    • 多边形具有自动闭合的左右,可以实现完美闭合并且不用将结束点设置为起始点
    • SVG的图形填充规则通过fill-rule属性来指定  （提供两种选项用于指定如何判断图形的"内部"）
      • 有效值：nonzero | evenodd |   默认：nonzero
• 折线 <polyline> (曲线)  元素是用于创建任何只有直线的形状
  • 必选： 至少2组点
• 路径 <path>  

 

文本

• 文本<text>
  • 必选： x y fill   
    • x 起始位置
    • y 起始位置
    • fill 填充颜色
• 文本路径<textPath>作用就是放在<text>标记内部引用预定义的，引用时，我们需要使用xlink:href属性指明需要引用的路径的ID。在SVG里，处理能沿直线方向写文字外，还能够使用先定义一条路径，让文字沿着定义好的路径排列
• 1 
         
           4   
          
            5     
           10   
          11 12   
          13 14   
          
           15     
           
            16       我先往上去，然后往下去，然后再往上去，漂亮吧！17     
           18   
          19 20   
          21   
          23 
         
• <tspan>标记的作用是将一段文本包裹起来，你可以对这段包裹的文字的颜色、位置、形状等特征进行单独的修饰，它跟HTML标记<span>的作用非常相似
• 1  5 
         
           6     
          
           你丫的 7       
           
            不是
             8       一个香蕉 9     
          10 
         

 

stroke 属性

• • stroke  颜色
  • stroke-width  宽度
  • stroke-linecap  不同类型的开放路径的终结
    • butt    直角原状态
    • round 圆角
    • square 加长方角（点的重合）
  • stroke-dasharray  用于创建虚线
    • 一个参数时： 表示一段虚线长度和每段虚线之间的间距 / 定义描边的虚线长度，如果提供奇数个，则会自动复制该值成偶数
    • 两个参数或者多个参数时：一个表示长度，一个表示间距/第一个为虚线的宽度     第二个是虚线之间的间距
  • stroke-dashoffset 定义虚线描边的偏移量

滤镜  fe 后缀可用于所有的滤镜    滤镜调试 

• <feGaussianBlur> 元素是用于创建模糊效果
  • <defs>元素定义短并含有特殊元素（如滤镜）定义

  • <filter>标签用来定义SVG滤镜 

    • <filter>元素id属性定义一个滤镜的唯一名称
    • <feGaussianBlur>元素定义模糊效果
    • in="SourceGraphic"这个部分定义了由整个图像创建效果
    • stdDeviation属性定义模糊量
    • <rect>元素的滤镜属性用来把元素链接到"f1"滤镜   filter="url(#f1)" 
• <feOffset>元素是用于创建阴影效果
  • • <filter>元素id属性定义一个滤镜的唯一名称
    • 例子：
      1 
                 
                  2     
                  
                   3       
                   4       
                   5       
                   6     
                  7   
                 8   
                 

       <feOffset>元素的属性改为"SourceAlpha"在Alpha通道使用残影，而不是整个RGBA像素
• <linearGradient>元素用于定义线性渐变
  • <linearGradient>标签必须嵌套在<defs>的内部。

  • <defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

  • 线性渐变可以定义为水平，垂直或角渐变：

    • 当y1和y2相等，而x1和x2不同时，可创建水平渐变
    • 当x1和x2相等，而y1和y2不同时，可创建垂直渐变
    • 当x1和x2不同，且y1和y2不同时，可创建角形渐变
    • <linearGradient>标签的id属性可为渐变定义一个唯一的名称
    • <linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置
    • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。
    • 填充属性把 ellipse 元素链接到此渐变
    • 例子：
    • 1 
                 
                  2     
                  
                   3       
                   4       
                   5     
                  6   
                 7   
                 
• <radialGradient>元素用于定义放射性渐变
  • <radialGradient>标签的 id 属性可为渐变定义一个唯一的名称
  • CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
  • 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束
  • 填充属性把ellipse元素链接到此渐变
  • 例子：
  • 1 
             
              2     
              
               3       
               5       
               6     
              7   
             8   
             
• <pattern>图像做背景填充形状
  • pattern 
    • userSpaceOnUse:    使用百分比配置

　　　　　　　　　　另一种是将pattern的宽度和高度固定住，在指定区域内平铺，能铺多少铺多少，超出部分裁掉。对应的属性为patternUnits="userSpaceOnUse"。相应的width和height即pattern的宽度和高度。 需要注意的是，userSpaceOnUse的pattern并不会在每个指定区域(形状元素)内重新以区域左上角开始排序。userSpaceOnUse的pattern的起点坐标只有一个，就是其x和y表示的在svg画布坐标系中的位置。

• • • objectBoundingBox: 使用宽高值配置

　　　　　　　　　　我们通过指定width和height来间接规定图案平铺的数量。因为这时，width和height被限制在0~1，或者0%~100%之间，即宽度或高度占填充区域高度或宽度的百分比。可想而知20%放5个，40%放2.5个;patternUnits并不会对内部的图案做缩放;默认情况下，pattern图案会将填充区域的左上角作为起点坐标(origin point)(0,0)。当然也可以通过设置x和y属性的值改变这个起点坐标。x和y分别表示相对于起点坐标的偏移量。在patternUnits="objectBoundingBox"情况下，x和y的值乘以填充区域相应的宽度和高度，即为实际起点坐标偏移量。

• 1 
         
           2     
          
            3         
           
             4             
             5         
            6         
           12     
          13     
          
           14         
           15         
           16     
          17    
         
  • patternContentUnitspattern的缩放和排布由patternUnits控制，

　　而pattern内部的图案的缩放和排布由patternContentUnits控制。

　　patternContentUnits也有两个属性：objectBoundingBox和userSpaceOnUse（默认属性值）

• • objectBoundingBox
    • 在userSpaceOnUse模式下，pattern内部元素的大小不会因为pattern的缩放而改变。userSpaceOnUse是patternContentUnits的默认属性值

  • objectBoundingBox

    • 在objectBoundingBox模式下，pattern内部元素所有属性的数值都会根据设置的比例，乘以pattern的width或height计算出实际长度。pattern内部元素所有属性的数值如果后面不带百分号%，都乘上100作为百分比数。所以像stroke-width默认值是1的这种属性，如果不指定一个数值，就会被当成100%来计算，结果就是撑满整个pattern。
  • 1 
             
               2         
              
                3             
               
                 4                 
                 5                 
                 6             
                7         
               8         
              
                9             
               10         
              11         
              
               12             
               13         
              14         
              
               15             
               16         
              17 
             

• • pattern中内嵌pattern

    允许在一个pattern中的元素内，嵌入另一个pattern

  • 1 
             
               2     
              
                3         
               
                 4             
                 5             
                 6         
                7         
               10         
               
                11             
                12         
               13     
              14     
              15 
             

     

结构元素

• <defs>定义元素
  • SVG 允许我们定义以后需要重复使用的图形元素。 建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。 在defs元素中定义的图形元素不会直接呈现。 你可以在你的视口的任意地方利用 或形状路径元素呈现这些元素
  • 允许的内容物
  • , , , , , , , , , , , , , , , , , 
  • 1 
             
              2   
              
               3     
               
                4       
                5       
                6     
               7   
              8   
                     9 
              
• <use>标记的作用是能从SVG文档内部取出一个节点，克隆它，并把它输出到别处，例子：
• 1   
         
           2   
            5   
          
            6     
           
             7       
             8     
            9   
          10   
          
           black
          11   
          12   
          
           red
          13   
          14   
          
           blue
          15   
          16  
         
• <symbol>标记的作用是定义一个图像模板，你可以使用标记实例化它，然后在SVG文档中反复使用，这种用法非常的高效。<symbol>本身不会输出任何图像，只有使用实例化后才会显示。
• 1 
         
           2  3 
          
            4   
            5   
            6 
           7 
           9 
          11 
          13 
         
• <g>标记就是‘group’的简写，是用来分组用的，它能把多个元素放在一组里，对<g>标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承<g>标记上的所有属性。用<g>定义的分组还可以使用进行复制使用。
• 1 
         
          3    
          
           4      
           5      
           6      
           7      
           8    
          9 
          

参考手册：