自定义 SVG（svg-path）

当内置 105 种形状不满足需求时，用 svg-path 图元把任意 SVG 图形变成组态图元——它与内置形状地位完全等同：可挂端口连线、绑测点、配状态色规则与动画。

三种图形来源

选项	方式	适用
svg-graphic	编辑器里点「SVG 图形」上传 / 粘贴源码，自动解析出下方三项	推荐入口
svg-path + svg-viewbox	直接粘贴单条路径 d 与源 viewBox	单色图标
svg-els + svg-viewbox	多元素 JSON（保留每个元素的填充色 / 描边）	多色复杂图形

缩放方式 svg-fit：contain 等比适配居中（默认）/ stretch 拉伸铺满图元框。viewBox 缺失时按路径包围盒自动适配，不会偏移。

在线演示

单路径心形图元（svg-path 模式），跟随主题描边填充：

JSON 片段

{
  "uid": "node_1",
  "type": "scada-node",
  "options": {
    "shape": "svg-path",
    "geo-x": 120, "geo-y": 80, "geo-w": 96, "geo-h": 96,
    "svg-path": "M 50 22 C 40 6 14 8 12 30 ... Z",
    "svg-viewbox": "0 0 100 100",
    "svg-fit": "contain",
    "node-text": "自定义图元"
  }
}

多元素模式 svg-els 为 JSON 数组字符串，每项 { "d": "...", "fill": "#f00", "stroke": "none" }，由编辑器上传解析自动生成，一般不手写。

与内置形状同等能力

• 端口：四向端口（上 / 右 / 下 / 左），可被连线吸附。
• 数据：data-enabled + data-key 绑测点后，show-value-text 显示数值文本；配 state-by-value + state-rules 按值换色。
• 动画：anim: blink / pulse / spin。

想把自定义图形沉淀为团队资产，参考 自定义组件开发 将其注册为插件形状。