SVG描边需用stroke设颜色、stroke-width设粗细，默认不可见；描边以中心线对齐，可借stroke-dasharray、stroke-linecap等增强样式；缩放时用vector-effect="non-scaling-stroke"保持描边固定宽度。
在HTML5中，SVG通过stroke属性为图形轮廓（如线条、矩形、圆形、路径等）添加描边，而stroke-width则控制该描边的粗细。描边默认不可见，必须显式设置stroke颜色才能显示。
基础描边设置：颜色与宽度
所有SVG形状元素（<rect></rect>、<circle></circle>、<line></line>、<path></path>等）都支持stroke和stroke-width属性：
-
stroke：接受颜色关键字（如red）、十六进制（如#007bff）、RGB/RGBA（如rgba(0,123,255,0.8)），设为none可隐藏描边 -
stroke-width：单位默认为用户坐标单位（通常等同于px），支持数字（如2）、带单位值（如2px、0.5em），值为0时描边不可见
示例：
该圆无填充，仅显示4单位宽的蓝色轮廓。
描边对齐方式：stroke-alignment
SVG描边默认以路径中心线为基准向两侧延伸。这意味着：
- 对于闭合图形（如
<rect></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></svg>或具体元素添加vector-effect="non-scaling-stroke" - 确保该元素未被
transform缩放干扰（该属性对transform缩放无效） - 注意兼容性：IE不支持
vector-effect，旧版Edge需前缀-ms-vector-effect
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
