svg中points属性仅用于和，自动闭合而不闭合；格式须空格分隔坐标对、逗号分隔x/y，严禁多余空格或全角符号；wpf的pointcollection需手动转为svg字符串格式，且单位与缩放行为不同。
SVG 中 points 属性只用于 <polyline></polyline> 和 <polygon></polygon>
它不是通用属性，不能用在 <path></path>、<circle></circle> 或其他 SVG 元素上。写错标签会直接被浏览器忽略——连警告都不报。
关键区别在于：
-
<polygon></polygon>的points自动首尾闭合（最后一点连回第一点） -
<polyline></polyline>的points不闭合，只是按顺序连线
比如 <polygon points="0,0 100,0 100,100"></polygon> 实际渲染的是三角形；而同样字符串用在 <polyline></polyline> 上，就是两条线段，没有底边。
points 值的格式必须严格：空格分隔坐标对，逗号分隔 x/y
合法写法："10,20 30,40 50,60" —— 注意是空格分隔每组，逗号分隔 xy，中间不能有换行、制表符或多余空格。
常见错误包括：
- 写成
"10,20,30,40"（少空格，浏览器当单个点解析，只取前两个数） - 写成
"10, 20 30, 40"（xy 间有空格，会被截断为"10,"这种非法值） - 用中文逗号或全角空格（
“”或 ）——解析失败，图形不显示
动态生成时建议用 points.split(/\s+/).filter(Boolean).map(p => p.replace(/,/g, ' ')) 预处理，比硬拼字符串更稳。
WPF 的 Polygon.Points 和 SVG 的 points 不兼容
别把 WPF 代码里的 PointCollection 直接塞进 SVG。WPF 的 Points 是对象集合，SVG 的 points 是纯文本属性。
例如 WPF 中你可能写：
myPolygon.Points = new PointCollection { new Point(10, 20), new Point(30, 40) };
对应 SVG 必须转成字符串：<polygon points="10,20 30,40"></polygon>。漏掉引号、多加括号、用 ToString() 直接输出对象都会导致空白渲染。
还有个坑：WPF 默认单位是 device-independent units（1/96 英寸），SVG 是像素，数值相同时视觉尺寸可能不一致，缩放行为也不同。
性能敏感场景下，避免频繁重设 points
每次改 points 属性都会触发 layout + render pipeline，尤其点数超 100 时卡顿明显。
- 动画中要逐帧更新？改用
<path d="..."></path>+transform更轻量 - 需要实时拖拽顶点？缓存原始数组，只在 mouseup 后批量更新
points字符串 - 点集来自后端？确保 JSON 返回的是扁平数字数组
[10,20,30,40]，前端用join(' ') + replace(/(\d+),(\d+)/g, '$1,$2')组装，别用循环拼接
最易被忽略的是：哪怕只改一个坐标的 y 值，整个 points 字符串都要重新解析——没有“局部更新”机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
