用途
Makepad 2.0 Vector 技能用于在 Makepad 2.0 中渲染分辨率无关的矢量图形。Vector 部件采用类 SVG 语法来定义图形，支持路径、形状、渐变、滤镜、分组、变换，以及通过 Tween 实现的属性动画。技能定位为 Makepad 2.0 Vector graphics widget 的关键参考资料。
在 Splash 中使用 SVG 有两种方式：
- Vector{}：在 Splash 中内联定义形状（路径、矩形、圆等）。
- Svg{}：通过 crate_resource() 或 http_resource() 加载外部 .svg 文件，可选动画与自定义 GPU 着色器。
详细文档可参考本地文件 ./references/vector-reference.md，其中包含完整的 Vector API、形状、渐变、滤镜与动画说明。
主要能力
基本属性
Vector 部件可设置 width / height（部件像素尺寸）与 viewbox（以 vec4 表示的 SVG viewBox，如 vec4(0 0 24 24)）。
技能特别强调：Vector 形状使用 SVG 风格属性，而不是 draw_bg.* 部件属性。
正确写法（SVG 属性）：
Path{d:"M 0 0 L 10 10" stroke:#x66aaff stroke_width:2.5} Circle{cx:10 cy:10 r:5 fill:#x44ddaa}
错误写法（这些属性在 Vector 形状上不起作用）：
Path{d:"..." draw_bg.stroke_color:#x66aaff draw_bg.stroke_width:2.} Circle{cx:10 cy:10 r:5 draw_bg.fill_color:#x44ddaa}
形状类型
Path 支持 SVG path data，可设置 fill、stroke、stroke_width。内置图形包括：
- Rect{x: 0 y: 0 width: 100 height: 50 fill: #f00 rx: 5}
- Circle{cx: 50 cy: 50 r: 25 fill: #00f}
- Ellipse{cx: 50 cy: 30 rx: 40 ry: 20 fill: #0f0}
- Line{x1: 0 y1: 0 x2: 100 y2: 100 stroke: #fff stroke_width: 2}
- Polyline{points: "0,0 50,25 100,0" fill: false stroke: #fff}
- Polygon{points: "50,0 100,100 0,100" fill: #f0f}
渐变
线性渐变通过 Gradient 定义，指定 id、x1/y1/x2/y2 与 Stop 色标，再以 fill: "url(#myGrad)" 引用。径向渐变通过 RadGradient 定义，指定 id、cx/cy/r 与 Stop 色标。
分组与变换
Group 支持 transform（如 "translate(10 20) rotate(45 50 50)"）与 opacity，内部可包含多个形状。
滤镜
Filter 可定义 DropShadow{dx dy blur color}，通过形状的 filter: "url(#shadow)" 引用。
Tween 动画
Tween 是属性值，而不是容器。它替换形状的某个属性（fill、stroke、opacity、cx、cy、r 等），赋予其动画值。
基本语法示例：
- 动画透明度（脉冲效果）：Circle{cx:8 cy:8 r:6 fill:#x44ddaa opacity:Tween{from:0.3 to:1.0 dur:1.5 loop_:true}}
- 动画位置（移动圆点）：Circle{cx:Tween{from:20 to:380 dur:3.0 loop_:true} cy:25 r:5 fill:#x66aaff}
- 动画颜色：Circle{fill:Tween{from:#x44ddaa to:#x6688dd dur:3.0 loop_:true} cx:10 cy:10 r:8}
- 动画描边：Path{d:"M 0 0 L 100 0" stroke:Tween{from:#x333333 to:#x66aaff dur:2.0 loop_:true} stroke_width:2.}
Tween 属性包括：from（起始值）、to（结束值）、values（关键帧值，可替代 from/to）、dur（时长秒，默认 1.0）、begin（延迟秒，默认 0.0）、loop_（true 表示无限，float 表示重复次数，默认 1.0）、calc（"discrete"、"paced"、"spline"，默认 "linear"）、fill_mode（"freeze" 或 "remove"，默认 "remove"）。
技能强调 loop_ 必须为布尔值：loop_:true 表示无限循环，loop_:3.0 表示播放 3 次，而 loop_:"indefinite" 字符串不会触发无限循环，只会播放一次。
可动画的属性包括：fill、stroke（颜色动画）；stroke_width、opacity、stroke_opacity（浮点动画）；cx、cy、r（Circle 位置与大小）；d（Path 路径变形）。
使用方式
常见模式包括：
脉冲指示器：Vector{width:16 height:16 Circle{cx:8 cy:8 r:6 fill:#x44ddaa opacity:Tween{from:0.3 to:1.0 dur:1.5 loop_:true}}}
沿线移动的圆点：Vector{width:Fill height:40 Path{d:"M 20 20 L 380 20" stroke:#x333355 stroke_width:1.} Circle{cx:Tween{from:20 to:380 dur:3.0 loop_:true} cy:20 r:4 fill:Tween{from:#x44ddaa to:#xffaa44 dur:3.0 loop_:true}}}
延迟序列动画：多个 Circle 使用相同 Tween 但不同 begin 值（0.0、0.5、1.0）实现错开效果。
图标模式（常见）：Makepad 2.0 中大多数 Vector 部件用作带 SVG 路径的图标，使用 let 绑定定义可复用图标，配合主题颜色（如 theme.color_highlight）以支持明暗模式。示例包括 IconCheck、IconTrash，均使用 fill: false、stroke、stroke_width、stroke_linecap: "round"、stroke_linejoin: "round"。
适用场景与选型
技能对比了 Vector{}、Svg{} 与 SDF2D Shader：
- Vector{}：输入为 Splash 内联形状，支持 SVG path data、渐变（let 绑定）、滤镜（Filter{DropShadow{}}）、Tween 动画，不支持 URL 加载，适合静态场景，适用于内联图标、插图、程序化矢量图形。
- Svg{}：输入为外部 .svg 文件，支持 SVG path data、渐变（SVG <defs>）、滤镜（SVG <filter>）、SVG <animate> 加 animating: true，支持 http_resource() URL 加载，适合复杂 SVG，适用于加载预制 SVG 文件与复杂 SVG 资源。
- SDF2D Shader：输入为着色器代码，不支持 SVG path data，需手动实现渐变与滤镜，通过 shader uniforms 动画，可完全控制，性能最佳，适用于动画形状、悬停效果、自定义部件背景。
Tween 与 Animator 的对比：Tween 作用于 SVG 形状属性，语法为属性值替换，渲染时自动触发，循环用 loop_:true，用于 SVG 动画；Animator 作用于部件着色器实例变量，语法为 animator: Animator{...} 块，由状态转换（悬停等）触发，循环用 Loop {duration: 1.0}，用于 UI 悬停/聚焦/激活效果。
限制与注意事项
十六进制颜色转义：当十六进制颜色包含字母 'e' 时，需加 #x 前缀，例如应写 stroke: #x2ecc71，而非 stroke: #2ecc71，否则解析器会把 'e' 误读为指数。
技能列出的最佳实践包括：使用 viewbox 定义独立于部件尺寸的坐标空间；图标描边/填充使用主题颜色以支持明暗模式；使用 let 绑定定义可复用图标；保持路径简单，复杂 SVG 路径可能影响性能；仅描边图标使用 fill: false（最常见模式）；图标设置 stroke_linecap: "round" 以获得更干净的线端。
本说明基于技能提供的内置文档整理，其他细节（如具体版本差异、平台兼容性、性能基准等）暂未提供。