svg的stroke屬性，神奇的描邊

1、stroke

定義一條線，文本或元素輪廓顏色

2、stroke-width

定義一條線，文本或元素輪廓厚度

3、stroke-linecap

描邊端點表現形式

<svg>
  <g fill='none' stroke='black' stroke-width='10'>
    <path stroke-linecap='butt' d='M5 20 l215 0' />
    <path stroke-linecap='round' d='M5 40 l215 0' stroke='red'/>
    <path stroke-linecap='square' d='M5 60 l215 0' />
  </g>
</svg>

stroke和stroke-*的屬性可以繼承

4、stroke-dasharray

用於創建虛線

stroke-dasharray = '10'
stroke-dasharray = '10, 10'
stroke-dasharray = '10, 10, 5, 5'

繪製虛線: 一個參數時： 表示一段虛線長度和每段虛線之間的間距
兩個參數或者多個參數時：一個表示長度，一個表示間距

5、stroke-dashoffset

定義一條線，文本或元素距離（相當於基於position：relative；設置left值。只是不像left單純的基於x方向設置， stroke-dashoffset是基於svg路徑設置的）

stroke-dasharray和stroke-dashoffset相結合可以做出很炫酷的效果

舉個例子：按鈕鼠標滑過動效，（鼠標滑過按鈕，邊框繞自身選中一週）

    #shape {
      stroke-width: 6px;
      fill: transparent;
      stroke: #009FFD;
      stroke-dasharray: 85 400;
      stroke-dashoffset: -220;
      transition: 1s all ease
    }
    svg:hover #shape {
      stroke-dasharray: 70 0;
      stroke-width: 3px;
      stroke-dashoffset: 0;
      stroke: #06D6A0
    }

  <svg height="40" width="150">
    <rect id="shape" height="40" width="150" />
  </svg>

6、stroke-linejoin

描邊轉角的表現方式

stroke-linejoin = miter
stroke-linejoin = round
stroke-linejoin = bevel

7、stroke-opacity

描邊透明度