SVG刻度线必须用stroke-width加粗，不能用CSS border；主刻度推荐2px，次刻度1px；Canvas中需设lineCap='round'防锯齿，且刻度与指针粗细应匹配（如指针=主刻度×1.5）。
SVG刻度线用stroke-width加粗，别碰CSS border
SVG里的刻度线是border完全无效。必须用stroke-width属性控制粗细，单位是像素（无单位缩写也行，但建议显式写px）。
常见错误现象：给.tick { border: 2px solid #333 }——毫无反应，因为border。
-
- 主刻度建议
stroke-width="2"，次刻度用"1"，视觉层次立刻分明 - 如果用
g里统一设stroke-width，别只设g的style——子stroke-width - Canvas绘制时同理：
ctx.lineWidth = 2，不是ctx.strokeStyle管粗细
Canvas中lineCap设为round才能让粗刻度不锯齿
Canvas画1px线斜着看还行，一旦lineWidth加到2px以上，lineCap: 'butt'（默认）会让末端被硬切，尤其在45°左右角度时明显发虚、像锯齿。必须显式设ctx.lineCap = 'round'。
使用场景：半圆/四分之三圆仪表盘，刻度线从圆心出发呈放射状，角度密集时锯齿感极强。
- 加粗前先调：
ctx.lineCap = 'round'，再ctx.lineWidth = 2 - 别依赖
ctx.save()/ctx.restore()来回切——lineCap是状态量，每次绘图前确认一次更稳 - 如果刻度线末端要接数字标签，
round还能自然衔接，避免出现“线头悬空2px”的错觉
动态生成刻度时，stroke-width不能靠JS拼字符串
用JavaScript循环生成SVG刻度线时，有人习惯innerHTML += `。这看似省事，但容易漏掉单位、引号嵌套出错，且无法复用CSS类做主题切换。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
推荐做法是先建document.createElementNS()逐个创建setAttribute('stroke-width', '2')。
- 避免硬编码值：
const majorWidth = 2; const minorWidth = 1;，后续改主题只需动常量 - 所有刻度线统一加
class="tick-major"或"tick-minor"，然后用CSS控制：.tick-major { stroke-width: 2; } - 注意：SVG的
stroke-width不支持百分比或em，只能是数字+可选单位（px、em等），但px最稳妥
粗刻度和指针粗细要匹配，否则视觉失衡
仪表盘里最抢眼的是指针，其次才是主刻度。如果指针stroke-width="3"，而主刻度还用"2"，会显得刻度“压不住”指针；反过来，指针太细又像没力气。
性能影响不大，但兼容性要注意：老版Safari对stroke-width > 10渲染可能模糊，建议上限控在6以内。
- 推荐比例：指针
stroke-width= 主刻度 × 1.5，例如主刻度2→ 指针3；次刻度1→ 指针尖端加1px圆点（ - Canvas中同理：
needleCtx.lineWidth = majorTickWidth * 1.5，别写死数字 - 真正容易被忽略的是：粗线条在小尺寸SVG里（如
viewBox="0 0 100 60"）会撑满空间，此时应同步缩放stroke-width，而不是只调viewBox
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
