控制svg描边需用stroke-width（非stroke）、stroke-linecap和stroke-dasharray三属性：stroke-width设粗细，默认1，支持单位与无单位值；stroke-linecap控制端点形状（butt/round/square）；stroke-dasharray定义虚线模式（如"5,3"），配合stroke-dashoffset可对齐首尾。
控制 SVG 描边的粗细、线帽和虚线效果，关键在三个属性：`stroke-width`（不是 `stroke`）、`stroke-linecap` 和 `stroke-dasharray`。它们各自职责明确，必须配合使用才能稳定生效。
描边粗细靠 stroke-width，不是 stroke
`stroke` 只管颜色，真正决定粗细的是 `stroke-width`。两者必须同时设置，缺一不可。
- 默认 `stroke-width` 是 1（单位为用户坐标单位，非像素），但小尺寸图形或缩放后可能视觉上“看不见”，别误以为没生效
- 支持带单位写法（如
stroke-width="2px"）和无单位数值（如stroke-width="0.5"），后者更适配 viewBox 缩放 - 设为
stroke-width="0"可彻底隐藏描边，比stroke="none"更可靠
线帽（端点形状）用 stroke-linecap 控制
当描边变粗（≥4）或路径较短时，端点样式会明显影响观感，不能忽略。
-
butt（默认）：平头截断，边缘垂直于线段方向，不额外延伸 -
round：两端加半圆，半径 =stroke-width / 2，适合柔和、手绘风格 -
square：方头外延，多出半个线宽，可能超出图形边界，需预留空间
虚线节奏由 stroke-dasharray 决定，注意数值逻辑
它定义“实线长、空隙长”的循环模式，数值是绝对长度，不受 viewBox 缩放影响。
-
stroke-dasharray="5,3"→ 实5、空3、实5、空3…… - 单值如
"8"等价于"8,8"；三个数如"4,2,6"会自动复制成偶数序列再两两配对，易错位，建议只用偶数个值 - 想画圆点边框？用
stroke-dasharray="0,6"+stroke-linecap="round"，再把路径向内缩进stroke-width/2 - 虚线首尾不对齐？配合
stroke-dashoffset微调起始位置，例如偏移量取 dasharray 总和的一半常能对齐四角
进阶提示：动画与闭合路径要特别处理
做描边动画（如手写效果）或虚线边框时，这些细节决定成败：
- 路径总长要用 JS 的
getTotalLength()获取，不能凭空估算 - 动画起点隐藏：设
stroke-dasharray="L"（L 为总长）+stroke-dashoffset="L" - 闭合图形（
<rect></rect>、<circle></circle>）若fill不为none，可能盖住描边，记得显式设fill="none" -
stroke-dasharray生效的前提是已有stroke值且stroke-width > 0
