svg 日常操作

创建svg 文件

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

详解viewBox  SVG Viewport、View Box和preserveAspectRatio

形状

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

• 矩形 <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 | inherit  默认：nonzero
        http://www.runoob.com/svg/svg-polygon.html
• 折线 <polyline> (曲线)  元素是用于创建任何只有直线的形状
  • 必选： 至少2组点
• 路径 <path>  http://www.cnblogs.com/xuey/p/8492498.html

文本

• 文本<text>
  • 必选： x y fill
    • x 起始位置
    • y 起始位置
    • fill 填充颜色
• 文本路径<textPath>作用就是放在<text>标记内部引用预定义的<path>，引用时，我们需要使用xlink:href属性指明需要引用的路径的ID。在SVG里，处理能沿直线方向写文字外，还能够使用<path>先定义一条路径，让文字沿着定义好的路径排列

•  <svg width="100%" height="100%" viewBox="0 0 1000 300"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
       <path id="MyPath"
             d="M 100 200
                C 200 100 300   0 400 100
                C 500 200 600 300 700 200
                C 800 100 900 100 900 100" />
     </defs>
  
     <use xlink:href="#MyPath" fill="none" stroke="red"  />
  
     <text font-family="Verdana" font-size="42.5">
       <textPath xlink:href="#MyPath">
         我先往上去，然后往下去，然后再往上去，漂亮吧！
       </textPath>
     </text>
  
     <!-- Show outline of the viewport using 'rect' element -->
     <rect x="1" y="1" width="998" height="298"
           fill="none" stroke="black" stroke-width="2" />
   </svg>

• <tspan>标记的作用是将一段文本包裹起来，你可以对这段包裹的文字的颜色、位置、形状等特征进行单独的修饰，它跟HTML标记<span>的作用非常相似

•  <style>
       text{font: 20px Verdana, Helvetica, Arial, sans-serif;}
       tspan{  fill: red; font-weight: bold}
   </style>
   <svg width="250" height="100" viewBox="0 0 250 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
       <text x="15" y="30">你丫的
         <tspan>不是</tspan>
         一个香蕉
       </text>
   </svg>

stroke 属性

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

滤镜  fe 后缀可用于所有的滤镜    滤镜调试 http://jorgeatgu.github.io/svg-filters/

• <feGaussianBlur> 元素是用于创建模糊效果

  • <defs>元素定义短并含有特殊元素（如滤镜）定义

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

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

       <defs>
           <filter id="f1" x="0" y="0" width="200%" height="200%">
             <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
             <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
             <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
           </filter>
         </defs>
         <rect width="90" height="90" stroke="green" stroke-width="3"
         fill="yellow" filter="url(#f1)" />

      <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 元素链接到此渐变
    • 例子：

    •  <defs>
           <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
             <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
             <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
           </linearGradient>
         </defs>
         <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

• <radialGradient>元素用于定义放射性渐变
  • <radialGradient>标签的 id 属性可为渐变定义一个唯一的名称
  • CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
  • 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束
  • 填充属性把ellipse元素链接到此渐变
  • 例子：

  •  <defs>
         <radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
           <stop offset="0%" style="stop-color:rgb(255,255,255);
           stop-opacity:0" />
           <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
         </radialGradient>
       </defs>
       <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

• <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的值乘以填充区域相应的宽度和高度，即为实际起点坐标偏移量。

•  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
       <defs>
           <pattern id="avatar" x="0" y="0" width="100%"  height="100%" patternContentUnits="objectBoundingBox">
               <image width="1" height="1" xlink:href="http://userimg.yingyonghui.com/head/24/1458708838143/5426424.png-thumb"/>
           </pattern>
           <style>
               circle, rect {
                   stroke: #ff9900;
                   stroke-width: 5px;
               }
           </style>
       </defs>
       <g>
           <circle cx="100" cy="100" r="50" fill="url(#avatar)"/></circle>
           <rect x="10" y="10" rx="20" ry="20" width="100" height="100" fill="url(#avatar)"/></rect>
       </g>
      </svg>

  • 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。

  •  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
             <defs>
                 <pattern id="tile1" patternUnits="objectBoundingBox"  x="0" y="0" width=".2" height=".2" patternContentUnits="objectBoundingBox">
                     <path d="M 0 0 Q .05 .2 .1 .1 T .2 .2" style="stroke: black; fill: none; stroke-width: .01;"></path>
                     <path d="M 0 0 h .2 v .2 h-.2z" style="stroke: black; fill: none; stroke-width: .01;"></path>
                 </pattern>
             </defs>
             <g transform="translate(20,20)">
                 <rect x="0" y="0" width="100" height="100" style="fill:url(#tile1); stroke: black;"></rect>
             </g>
             <g transform="translate(135,20)">
                 <rect x="0" y="0" width="70" height="80" style="fill:url(#tile1); stroke: black;"></rect>
             </g>
             <g transform="translate(220,20)">
                 <rect x="0" y="0" width="150" height="80" style="fill:url(#tile1); stroke: black;"></rect>
             </g>
     </svg>

• • pattern中内嵌pattern

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

  •  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
         <defs>
             <pattern id="stripe" x="0" y="0" width=".2" height=".3333" patternContentUnits="objectBoundingBox">
                 <path d="M0 0h1" stroke="grey" stroke-width=".01"></path>
                 <path d="M0 0v1" stroke="grey" stroke-width=".01"></path>
             </pattern>
             <!-- 可以在pattern的属性中使用viewBox完全替代patternContentUnits="objectBoundingBox"
             如果有viewBox属性，patternContentUnits属性将被忽略
             viewBox: x y w h -->
             <pattern id="circle" x="0" y="0" width=".2" height=".25" viewBox="0 0 50 40">
                 <circle cx="20" cy="20" r="15" fill="url(#stripe)" stroke="black"></circle>
             </pattern>
         </defs>
         <path d="M0 0 h300v300h-300z" fill="url(#circle)" stroke="black"></path>
     </svg>

结构元素

• <defs>定义元素
  • SVG 允许我们定义以后需要重复使用的图形元素。 建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。 在defs元素中定义的图形元素不会直接呈现。 你可以在你的视口的任意地方利用 <use>或形状路径元素呈现这些元素
  • 允许的内容物
  • 动画元素
    描述性元素
    形状元素
    结构化元素
    渐变元素
    <a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

  •  <svg width="80px" height="30px" viewBox="0 0 80 30" xmlns="http://www.w3.org/2000/svg">
       <defs>
         <linearGradient id="Gradient01">
           <stop offset="20%" stop-color="#39F" />
           <stop offset="90%" stop-color="#F3F" />
         </linearGradient>
       </defs>
       <rect x="10" y="10" width="60" height="10" fill="url(#Gradient01)"  />
     </svg> 

• <use>标记的作用是能从SVG文档内部取出一个节点，克隆它，并把它输出到别处，例子：

•    <svg width="100%" height="300" xmlns="http://www.w3.org/2000/svg" viewBox='0 0 50 100'>
     <style>
       .classA { fill:red }
     </style>
     <defs>
       <g id="Port">
         <circle style="fill:inherit" r="10"/>
       </g>
     </defs>
     <text y="15">black</text>
     <use x="50" y="10" xlink:href="#Port" />
     <text y="35">red</text>
     <use x="50" y="30" xlink:href="#Port" class="classA"/>
     <text y="55">blue</text>
     <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
    </svg>

• <symbol>标记的作用是定义一个图像模板，你可以使用<use>标记实例化它，然后在SVG文档中反复使用，这种用法非常的高效。<symbol>本身不会输出任何图像，只有使用<use>实例化后才会显示。

•  <svg viewBox="0 0 150 150" height='300'  xmlns="http://www.w3.org/2000/svg" >
  
   <symbol id="sym01" viewBox="0 0 150 110">
     <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
     <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
   </symbol>
   <use xlink:href="#sym01"
        x="0" y="0" width="100" height="50"/>
   <use xlink:href="#sym01"
        x="0" y="50" width="75" height="38"/>
   <use xlink:href="#sym01"
        x="0" y="100" width="50" height="25"/>
   </svg>

• <g>标记就是‘group’的简写，是用来分组用的，它能把多个元素放在一组里，对<g>标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承<g>标记上的所有属性。用<g>定义的分组还可以使用<use>进行复制使用。

•  <svg viewBox="0 0 95 50" xmlns="http://www.w3.org/2000/svg">
      <g stroke="green" fill="white" stroke-width="5">
        <circle cx="25" cy="25" r="15"/>
        <circle cx="40" cy="25" r="15"/>
        <circle cx="55" cy="25" r="15"/>
        <circle cx="70" cy="25" r="15"/>
      </g>
   </svg> 

参考手册：https://www.w3cplus.com/svg-tutorial

http://know.webhek.com/svg/svg-home.html

http://www.runoob.com/svg/svg-tutorial.html

https://developer.mozilla.org/zh-CN/docs/Web/SVG

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201507082192.html

https://segmentfault.com/a/1190000009278935