stroke-linecap控制线段端点形状，有butt、round、square三种值；stroke-linejoin控制折线拐角连接方式，有miter、round、bevel三种值，二者协同影响SVG线条的视觉精细度与专业感。
SVG 的 stroke-linecap 和 stroke-linejoin 是控制描边端点与连接处视觉样式的关键属性，直接影响线条的精细度和专业感。
stroke-linecap：控制线段端点形状
该属性定义路径或线条（<line></line>、<path></path> 等）起始和结束位置的“帽子”样式，有三个可选值：
- butt（默认）：端点平齐截断，边缘垂直于线段方向，不延伸
- round：端点为半圆形，半径等于 stroke-width，视觉更柔和
- square：端点为正方形，向外延伸半个 stroke-width，形成“加长方头”效果
例如：<line x1="10" y1="20" x2="100" y2="20" stroke="blue" stroke-width="12" stroke-linecap="round"></line> 会在线条两端各加一个半径为 6px 的蓝色半圆。
stroke-linejoin：控制折线拐角连接方式
当一条 <path></path> 包含多个线段（如 L、L、L），或使用 <polyline></polyline> 时，相邻线段交汇处的形状由该属性决定：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
miter（默认）：尖角延伸相交，形成锐利顶点；若夹角过小，超出
stroke-miterlimit限制则自动退化为 bevel - round：拐角处用四分之一圆弧填充，圆弧半径 = stroke-width，过渡圆润
- bevel：用直线切掉尖角，形成斜切面，效果类似倒角
实际中，绘制多边形轮廓或手绘风格路径时，round 更友好；而工程制图类图形常保留 miter，但需配合设置 stroke-miterlimit 防止异常拉伸。
配合使用的小技巧
这两个属性通常协同生效，尤其在复杂 <path></path> 中：
- 绘制虚线（
stroke-dasharray）时，stroke-linecap会影响每一段虚线的端点形态 - 使用
stroke-linejoin="miter"时，若发现尖角被意外截断，检查是否触发了 miter limit —— 可通过增大stroke-miterlimit（默认为 4）缓解 - 在动画中动态修改这些值（如 hover 时从 butt → round），能增强交互反馈，但注意浏览器重绘开销较低，适合轻量过渡
兼容性与注意事项
所有现代浏览器（Chrome、Firefox、Safari、Edge）均完整支持这两个属性，包括移动端。IE9+ 支持基本功能，但 IE9 对 stroke-linejoin="miter" 的 miter-limit 行为略有差异。建议避免在关键 UI 中依赖极小夹角下的 miter 效果，必要时统一设为 round 保证一致性。
