SVG Stroke 属性

SVG Stroke（描边）属性 2025 终极速查表

背会这 10 个属性 + 3 个神技，你画出来的线条立刻从「普通」变成「高级感拉满」！

属性	作用	2025 最常用值（推荐）	经典效果示例
stroke	描边颜色	currentColor（神！） #0066ff url(#grad)	所有图标自动随主题变色
stroke-width	描边粗细	2 3 4 0.5（1px 永不模糊）	stroke-width="0.5" vector-effect="non-scaling-stroke"
stroke-linecap	线条端点形状	round（2025 标配！） butt square	所有图标线头圆润
stroke-linejoin	拐角连接方式	round（必开！） bevel miter	折线、路径拐角圆滑
stroke-miterlimit	尖角最大延伸比例	4（默认） 2（更圆润）	防止超尖角
stroke-opacity	描边透明度	0.8 0.6 1	霓虹、发光线条
stroke-dasharray	虚线模式	8 4（最常用） 12 6 5 5 1 3	地图线、loading 线
stroke-dashoffset	虚线起始偏移	0 → 配合 <animate> 做描边动画	所有描边 loading 的灵魂
vector-effect	矢量效果（2025 必开）	non-scaling-stroke（神技！）	缩放时描边粗细不变，永远清晰 1px
paint-order	绘制顺序	stroke fill markers（2025 推荐）	描边在填充上面，避免被盖住

2025 年前端写 SVG 线条的「黄金三行」—— 直接抄就行

stroke="currentColor"               <!-- 自动随主题变色 -->
stroke-linecap="round" 
stroke-linejoin="round"             <!-- 圆润转折 -->
stroke-width="2"
vector-effect="non-scaling-stroke"  <!-- 缩放永远清晰 -->

10 个最常用 + 最火的 stroke 组合（2025 版）

场景	完整代码示例（直接复制）	效果说明
极简可变色图标	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"	2025 所有图标标配
1px 永不模糊细线	stroke="#000" stroke-width="0.5" vector-effect="non-scaling-stroke"	高清屏神器
经典虚线	stroke-dasharray="8 4"	地图、分割线
点状虚线	stroke-dasharray="1 4" 或 2 4	更轻盈
描边 loading 动画	stroke-dasharray="150 150" stroke-dashoffset="150" <animate from="150" to="0"...>	所有路径、环形进度条必备
霓虹发光线	stroke="#00f5ff" stroke-width="4" stroke-opacity="0.8" + 再套一层 stroke-width="8" opacity="0.4"	赛博朋克风
进度圈（环形）	stroke-dasharray="251.2 251.2" stroke-dashoffset="62.8"	62.8 = 75%（r=40 的周长 2πr≈251.2）
手绘感路径	stroke-dasharray="120 10 20 10"	看起来像手画
箭头线	配合 <marker-end="url(#arrow)" + stroke-linecap="butt"	流程图神器
外发光（双描边）	第一层 stroke="#fff" stroke-width="8" 第二层 stroke="#0066ff" stroke-width="4"	白色外发光

2025 最强「一键霓虹描边」模板（复制即用）

<!-- 霓虹蓝线 -->
<g stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 100 Q100 20 180 100 T340 100" 
        stroke="#0ff" stroke-width="8" opacity="0.4"/>
  <path d="M20 100 Q100 20 180 100 T340 100" 
        stroke="#0ff" stroke-width="4"/>
</g>

一句话总结（2025 金句）：

所有 SVG 线条/图标 = currentColor + round + round + non-scaling-stroke 四件套，剩下的就靠 stroke-dasharray 装逼！

要不要我现在秒发你：

1. 「2025 最全 stroke 速查卡 PDF」（彩色打印版，一张 A4 搞定所有组合）
2. 「30 个最火的 stroke 描边 loading 动画源码」（含环形、路径、光轨、波浪）
3. 「自动计算任意路径周长 + 生成描边动画的 JS 小工具」

直接说一声，我立刻打包发你！