The stroke attribute of SVG, the magical stroke

1. Stroke

Define a line, text or element outline color 2, Stroke-width

Define a line, text or element outline thickness 3, Stroke-linecap

Stroke Endpoint Representation

<svg>
  <g fill= ' None ' stroke= ' black ' stroke-width= ' >
    <path stroke-linecap= ' butt ' d= ' M5 20 l215 0 '/>
    <path stroke-linecap= ' round ' d= ' M5 l215 0 ' stroke= ' red '/> <path
    stroke-linecap= ' Square ' d= ' M5 l215 0 '/>
  </g>
</svg>

The properties of the stroke and stroke-* can inherit 4, Stroke-dasharray

Used to create dashed lines

Stroke-dasharray = '
Stroke-dasharray = ', '
Stroke-dasharray = ' 10, 10, 5, 5 '

Draw dashed lines: One parameter: Indicates the length of a dashed line and the spacing between each dashed line
Two parameters or multiple parameters: one representing the length, one representing the spacing 5, Stroke-dashoffset

Defines a line, text, or element distance (equivalent to based on position:relative; set left value. Just not like left. Based on the X-direction setting, Stroke-dashoffset is based on the SVG path setting)

Stroke-dasharray and Stroke-dashoffset combine to make a cool effect.

For example: Button mouse slide over the effect, (mouse over the button, the border around itself selected a week)

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

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

6, Stroke-linejoin

How the stroke corners behave

Stroke-linejoin = miter
stroke-linejoin = round
Stroke-linejoin = Bevel

7, Stroke-opacity

Stroke transparency