HTML5中SVG形状描边Stroke的定义及宽度配置

SVG描边需用stroke设颜色、stroke-width设粗细，默认不可见；描边以中心线对齐，可借stroke-dasharray、stroke-linecap等增强样式；缩放时用vector-effect="non-scaling-stroke"保持描边固定宽度。

在HTML5里，SVG利用stroke线条、矩形、圆形、路径等图形的轮廓描边由该属性添加，而stroke-width用于控制描边粗细。由于描边默认不可见，必须明确设置stroke颜色后才会显示。

描边基础设置：宽度与颜色

全部SVG形状元素（<rect>、<circle>、<line>、<path>等）均支持stroke以及stroke-width属性：

• stroke：可接受颜色关键字（如red）、十六进制（如#007bff）、RGB/RGBA（如rgba(0,123,255,0.8)），设置为none即可隐藏描边
• stroke-width：可填写数字（如；若未指定单位，则采用用户坐标单位（一般与px相同）2）和带单位值（如2px、0.5em），取值为0时描边不可见

示例：
<circle cx="50" cy="50" r="30" fill="none" stroke="blue" stroke-width="4" />
该圆无填充，仅显示4单位宽的蓝色轮廓。

stroke-alignment：用于设置描边对齐方式

SVG描边以路径中心线为基准，默认向两边延伸。这表示：

• 针对闭合图形（如<rect>），描边内外各占一半；若stroke-width=4，设定的宽高均需再加4单位，才是图形的实际总尺寸
• 如要让描边完全朝内或朝外，需要手动调整坐标或采用transform；SVG2草案里的stroke-alignment属性（inner/outer/center）目前仍未获得主流浏览器广泛支持
• 通常的处理方式是：绘制关键尺寸时留出描边空间，或通过vector-effect="non-scaling-stroke"避免缩放导致描边异常变粗

增强描边样式：端点与虚线

除了宽度和颜色，还能设置描边的视觉效果：

立即学习“前端免费学习笔记（深入）”；

• stroke-dasharray：用于定义虚线模式，如"5,3"表示按5单位实线+3单位空白交替
• stroke-linecap：用于控制线段端点形状，可选择butt（默认平头）、round（圆头）、square（方头，额外延伸半宽）
• stroke-linejoin：用于控制折线连接处形状，可选择miter（默认尖角）、round（圆角）、bevel（斜角）

这些属性往往与stroke-width配合使用，例如粗描边搭配round端点显得更柔和，细描边采用butt则更利落。

响应式缩放场景中的描边处理

SVG发生缩放时（如通过viewBox适应容器，或使用CSS设置width/height）后，图形与描边将按相同比例一同缩放。若要固定描边的像素宽度（例如UI图标采用1px边框），则应：

• 给<svg>或具体元素添加vector-effect="non-scaling-stroke"
• 并确保该元素没有受到transform带来的缩放影响（但无法处理transform产生的缩放）
• 兼容性方面需注意：IE不支持vector-effect，旧版Edge需要前缀-ms-vector-effect