SVG 基础入门
什么是 SVG
SVG 的优势与应用场景
SVG 与 Canvas 对比
浏览器支持与兼容性
第一个 SVG 程序
SVG 坐标系统
视口与画布
viewBox 属性
preserveAspectRatio
坐标变换
绘制基本形状
绘制矩形 rect
绘制圆形 circle
绘制椭圆 ellipse
绘制直线 line
绘制折线 polyline
绘制多边形 polygon
绘制路径 path
路径详解
路径基础
M/m 移动命令
L/l 线段命令
H/h 和 V/v 水平垂直线
C/c 三次贝塞尔曲线
S/s 平滑三次贝塞尔曲线
Q/q 二次贝塞尔曲线
T/t 平滑二次贝塞尔曲线
A/a 弧线命令
Z/z 闭合路径
填充与描边
fill 填充属性
stroke 描边属性
stroke-width 线宽
stroke-linecap 线帽
stroke-linejoin 线连接
stroke-dasharray 虚线
stroke-dashoffset 虚线偏移
opacity 透明度
fill-rule 填充规则
渐变与图案
线性渐变 linearGradient
径向渐变 radialGradient
渐变停止点 stop
图案 pattern
渐变动画
文本
文本基础 text
tspan 文本片段
textPath 文本路径
字体属性
文本对齐
文本装饰
变换
translate 平移
rotate 旋转
  1. SVG图形
  2. 填充与描边
  3. stroke-linejoin 线连接

stroke-linejoin 线连接

详细介绍SVG的stroke-linejoin线连接属性，包括miter、round、bevel三种样式的区别和用法。通过实例掌握如何控制线条转角样式。 stroke-linejoin属性定义两条线段连接处的转角样式。

基本语法

<element stroke-linejoin="样式值"/>

三种样式

miter（默认值）

尖角连接，线条延伸相交形成尖角。

miter：尖角 
<polyline points="50,120 100,30 150,120" fill="none" stroke="#3498db" stroke-width="15" stroke-linejoin="miter"/>

round

圆角连接，连接处为圆弧。

round：圆角 
<polyline points="50,120 100,30 150,120" fill="none" stroke="#3498db" stroke-width="15" stroke-linejoin="round"/>

bevel

斜角连接，连接处被切平。

bevel：斜角 
<polyline points="50,120 100,30 150,120" fill="none" stroke="#3498db" stroke-width="15" stroke-linejoin="bevel"/>

三种样式对比

miter round bevel 
<polyline points="40,120 90,30 140,120" fill="none" stroke="#e74c3c" stroke-width="12" stroke-linejoin="miter"/>
<polyline points="160,120 210,30 260,120" fill="none" stroke="#3498db" stroke-width="12" stroke-linejoin="round"/>
<polyline points="280,120 330,30 380,120" fill="none" stroke="#2ecc71" stroke-width="12" stroke-linejoin="bevel"/>

stroke-miterlimit

当使用miter时，如果角度很尖锐，尖角会变得很长。stroke-miterlimit限制尖角的最大长度。

基本语法

<element stroke-miterlimit="数值"/>

效果对比

miterlimit=10 miterlimit=2 miterlimit=1 
<polyline points="40,130 70,30 100,130" fill="none" stroke="#3498db" stroke-width="10" stroke-linejoin="miter" stroke-miterlimit="10"/>
<polyline points="150,130 180,30 210,130" fill="none" stroke="#e74c3c" stroke-width="10" stroke-linejoin="miter" stroke-miterlimit="2"/>
<polyline points="260,130 290,30 320,130" fill="none" stroke="#2ecc71" stroke-width="10" stroke-linejoin="miter" stroke-miterlimit="1"/>

当尖角超过限制时，会自动转换为bevel样式。

实际应用

多边形

miter round 
<polygon points="60,20 100,40 100,80 60,100 20,80 20,40" fill="none" stroke="#e74c3c" stroke-width="8" stroke-linejoin="miter"/>
<polygon points="220,20 260,40 260,80 220,100 180,80 180,40" fill="none" stroke="#3498db" stroke-width="8" stroke-linejoin="round"/>

箭头图标

<polyline points="30,50 80,50 80,30 120,50 80,70 80,50" fill="none" stroke="#3498db" stroke-width="6" stroke-linejoin="round" stroke-linecap="round"/>

地图路径

<polyline points="20,80 50,60 80,70 110,40 140,50 180,20" fill="none" stroke="#e74c3c" stroke-width="4" stroke-linejoin="round" stroke-linecap="round"/>
<circle cx="20" cy="80" r="5" fill="#3498db"/>
<circle cx="180" cy="20" r="5" fill="#2ecc71"/>

样式选择建议

样式适用场景
miter几何图形、技术图纸
round图标、圆润风格设计
bevel避免尖角过长的场景
上一章：stroke-linecap 线帽
下一章：stroke-dasharray 虚线