SVG: Stroke相关属性

Stroke

svg 提供一些属性来控制绘制描边的方式

• stroke
• stroke-width
• stroke-linecap
• stroke-dasharray

stroke

stroke：表示描边颜色

stroke-width

stroke-width：表示描边的粗细

<svg>
  <g fill="none">
    <path stroke="red" d="M5 20 l500 0" />
    <path stroke="blue" d="M5 40 l500 0" />
    <path stroke="black" d="M5 60 l500 0" />
  </g>
</svg>
 <svg>
  <g fill="none" stroke="red">
    <path stroke-width="4" d="M5 20 l500 0" />
    <path stroke-width="8" d="M5 40 l500 0" />
    <path stroke-width="12" d="M5 60 l500 0" />
  </g>
</svg>

stroke-linecap

stroke-linecap：控制边框终点的形状
属性有三个值

• butt：直边结束线段
• square：会稍微超出实际路径的范围，超出的大小由stroke-width控制
• round：边框的终点是圆角，圆角的半径也是由stroke-width控制的

<svg>
  <g fill="none" stroke="green" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l500 0" />
    <path stroke-linecap="round" d="M5 40 l500 0" />
    <path stroke-linecap="square" d="M5 60 l500 0" />
  </g>
</svg>

stroke-linejoin

stroke-linejoin：描边转角的表现方式

• miter：默认值，表示用方形画笔在连接处形成尖角
• round：用圆角连接，实现平滑效果
• bevel：连接处会形成一个斜接

 <svg width="160" height="280">
    <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none"
      stroke-linejoin="miter" />

    <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none"
      stroke-linejoin="round" />

    <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square" fill="none"
      stroke-linejoin="bevel" />
  </svg>

stroke-dasharray

stroke-dasharray：表示虚线描边

• 属性是一组用逗号分割的数字组成的数列

<svg>
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="290" d="M0 0 l290 0" />
    <path stroke-dasharray="5,5" d="M5 20 l290 0" />
    <path stroke-dasharray="10,10" d="M5 40 l290 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l290 0" />
  </g>
</svg>

stroke-dashoffset

stroke-dashoffset：表示虚线的起始偏移