svg中线条效果由marker（控制线头样式）和stroke-linejoin（控制连接点形态）原生实现；marker通过id引用，需设viewbox、refx/refy；stroke-linejoin取值miter（尖角）、round（圆角）、bevel（斜切），影响polyline/path折点，但对独立line无效。
SVG 中的线条效果，核心在于控制线头（箭头）样式和连接点（line join）行为。这两者分别由 marker 和 stroke-linejoin 属性实现，不是靠“画个三角形贴上去”这种手动方式，而是 SVG 原生支持的声明式机制。
用 marker 定义可复用的线头图形
<marker></marker> 是 SVG 专为起点/终点设计的标记容器，它本身不渲染，只被引用。VueFlow 等图可视化库正是基于它封装箭头配置。
- 必须定义
id，并在<line></line>、<polyline></polyline>或<path></path>的marker-start/marker-end中引用 - 常用属性：
viewBox控制内部坐标系（推荐"0 0 10 10"），refX/refY指定箭头尖端对齐位置（如refX="10"表示右端对齐线尾） - 内部可放任意 SVG 图形：三角形（
<path d="M0,0 L10,5 L0,10 Z"></path>）、圆点（<circle r="2"></circle>）、甚至文字或图标
控制线段交汇处的视觉形态
当多条线在同一点相交（比如 <polyline></polyline> 的折点，或多个 <line></line> 共享端点），stroke-linejoin 决定拐角怎么“收口”。
-
miter（默认）：尖角延伸，可能产生过长尖刺；配合stroke-miterlimit限制延伸比例（如设为2，当延伸长度超过线宽2倍时自动切为bevel） -
round：以线宽为直径画圆角，柔和自然 -
bevel：直接切平拐角，形成斜切面，适合硬朗风格
polyline 与 path 在连接点处理上的差异
<polyline></polyline> 是多段线的快捷写法，所有顶点连成一条路径，其内部折点天然受 stroke-linejoin 影响；而 <path></path> 需要显式使用 L、C 等命令构建拐点，同样响应该属性。
- 若用多个独立
<line></line>拼接，它们之间没有“连接关系”，stroke-linejoin不生效——此时需改用<polyline></polyline>或单个<path></path> -
<polyline points="10,10 50,10 50,50"></polyline>的中间点 (50,10) 就是连接点，设置stroke-linejoin="round"会让它变圆角
避免常见视觉断裂问题
线头错位、连接点露白、箭头变形，往往源于坐标系或缩放未对齐。
-
<marker></marker>的viewBox和内部图形尺寸要匹配，例如viewBox="0 0 10 10"下，箭头路径最大 x 应 ≤10 - 给
<polyline></polyline>或<path></path>设置vector-effect="non-scaling-stroke"，可防止缩放时线宽和箭头一同放大失真 - 若线头方向反了，检查
refX是否设在了错误一端（如箭头朝左却设refX="0"）
