svg中的描边属性

svg中的描边属性

1. stroke
   stroke 是 SVG 中 图形的“描边”颜色。
   

   <circle cx="50" cy="50" r="40" stroke="red" fill="none" />
   

2. stroke-width
   描边宽度
   

   <circle stroke-width="5" />
   

3. stroke-linecap
   线条端点的形状（caps = “帽子”）

   值	效果
   butt	平头（默认）
   round	圆头
   square	方形头，并且略向外延伸

   <line stroke-linecap="round" />
   

4. stroke-linejoin
   拐角的形状（joins = “连接”）

   值	效果
   miter	尖角
   round	圆角
   bevel	斜切角

5. stroke-dasharray
   虚线模式（超级常用，做动画必用！）
   

   stroke-dasharray="dash gap dash gap ..."
   

   例如：
   

   <circle stroke-dasharray="5 10" />
   

   意味着：
   画 5 的线
   空 10 的间隔
   再画 5
   再空 10
   …

---