stroke-linecap控制线段端点形状，有butt、round、square三种值；stroke-linejoin控制折线拐角连接方式，有miter、round、bevel三种值，二者协同影响SVG线条的视觉精细度与专业感。

SVG 的 stroke-linecap 和 stroke-linejoin 是控制描边端点与连接处视觉样式的关键属性，直接影响线条的精细度和专业感。

stroke-linecap：控制线段端点形状

该属性定义路径或线条（、 等）起始和结束位置的“帽子”样式，有三个可选值：

• butt（默认）：端点平齐截断，边缘垂直于线段方向，不延伸
• round：端点为半圆形，半径等于 stroke-width，视觉更柔和
• square：端点为正方形，向外延伸半个 stroke-width，形成“加长方头”效果

例如： 会在线条两端各加一个半径为 6px 的蓝色半圆。

stroke-linejoin：控制折线拐角连接方式

当一条 包含多个线段（如 L、L、L），或使用 时，相邻线段交汇处的形状由该属性决定：

DeepBI DHTML 页面生成器

生成可在 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 防止异常拉伸。

配合使用的小技巧

这两个属性通常协同生效，尤其在复杂 中：

• 绘制虚线（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 保证一致性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！