如何让一个包含 SVG 的节点可缩放？

[ghost]

如何保证可缩放？

1. 设置 svg 的 viewBox
2. 设置 svg 的 refWidth 和 refHeight 为 100%

当前版本官方不支持 SVG 缩放。如果你遇到这个问题，可以试试这个方法：
创建一个自定义组件，该自定义组件继承 Shape.Empty，然后实现上面的两点

以下示例基于 自定义开关节点 改造
代码示例：

import { Graph, Shape, NodeView } from '@antv/x6'

const switchCenter = {
  x: 35,
  y: -2,
}
const switchOpen = `rotate(-30 ${switchCenter.x} ${switchCenter.y})`
const switchClose = `rotate(-12 ${switchCenter.x} ${switchCenter.y})`

const markup = [
  {
    tagName: 'svg',
    selector: 'svg',
    children: [
      {
        tagName: 'g',
        selector: 'left-group',
        children: [
          {
            tagName: 'rect',
            selector: 'left',
            groupSelector: 'line',
            attrs: {
              x: 0,
              y: 0,
            },
          },
          {
            tagName: 'circle',
            selector: 'lco',
            groupSelector: 'co',
            attrs: {
              cx: 30,
            },
          },
          {
            tagName: 'circle',
            selector: 'lci',
            groupSelector: 'ci',
            attrs: {
              cx: 30,
            },
          },
        ],
      },
      {
        tagName: 'rect',
        selector: 'switch',
        groupSelector: 'line',
      },
      {
        tagName: 'g',
        selector: 'right-group',
        children: [
          {
            tagName: 'rect',
            selector: 'right',
            groupSelector: 'line',
            attrs: {
              x: 70,
              y: 0,
            },
          },
          {
            tagName: 'circle',
            selector: 'rco',
            groupSelector: 'co',
            attrs: {
              cx: 70,
            },
          },
          {
            tagName: 'circle',
            selector: 'rci',
            groupSelector: 'ci',
            attrs: {
              cx: 70,
            },
          },
        ],
      },
    ]
  }
]

const attrs = {
  svg: {
    viewBox: '0 -20 100 40',
    // 注意这里的 refWidth 和 refHeight
    refWidth: '100%', 
    refHeight: '100%',
  },
  line: {
    width: 30,
    height: 2,
    fill: '#000',
    stroke: '#000',
  },
  co: {
    r: 8,
    fill: '#000',
  },
  ci: {
    r: 4,
    fill: '#fff',
  },
  switch: {
    ...switchCenter,
    width: 35,
    transform: switchOpen,
  },
}

class ElectricSwitch extends Shape.Empty {

  constructor(metadata) {
    super(Object.assign({}, metadata, { markup, attrs, view: 'electric.switch' }));
  }

  get isConnected() {
    return !this.isDisconnected
  }

  get isDisconnected() {
    const attrPath = 'attrs/switch/transform'
    const current = this.prop(attrPath)
    return current === switchOpen;
  }

  init() {
    super.init();
  }

  setup() {
    super.setup();
  }

  toggleOpen() {
    const attrPath = 'attrs/switch/transform'
    const target = this.isDisconnected ? switchClose : switchOpen
    this.transition(attrPath, target, {
      interp: (a, b) => {
        const reg = /-?\d+/g
        const start = parseInt(a.match(reg)[0], 10)
        const end = parseInt(b.match(reg)[0], 10)
        const d = end - start
        return (t) => {
          return `rotate(${start + d * t} ${switchCenter.x} ${switchCenter.y})`
        }
      },
    })
    this.notify('node:custom:switch', { isConnected: this.isConnected });
  }
}

class ElectricSwitchView extends NodeView {

  constructor(cell, options) {
    super(cell, options)
  }

  onClick() {
    this.cell.toggleOpen();
  }
}

Graph.registerView('electric.switch', ElectricSwitchView, true)
Graph.registerNode('electric.switch', ElectricSwitch, true)

const graph = new Graph({
  container: document.getElementById('container')!,
  grid: true,
  resizing: true
})

const node = graph.createNode({
  x: 100,
  y: 100,
  width: 100,
  height: 50,
  shape: 'electric.switch'
})

node.on('node:custom:switch', (isConnected) => {
  console.log(isConnected)
})

graph.addNode(node)

可以将上面的代码粘贴到 自定义开关节点 代码编辑器中查看效果。

最终效果演示：

5.mp4

[ghost]

2. 使用官方的 svg-to-shape 解决问题

import { Graph, Markup } from '@antv/x6'

const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
  resizing: true
})

const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="109" height="109">
  <g class="layer" transform="translate(-293.5 -96.5)">
    <g fill="none" stroke="#000" stroke-width="5">
      <circle cx="348" cy="151" r="52"/>
      <circle cx="348" cy="152" r="16"/>
    </g>
    <g fill="none" stroke="#000" stroke-width="5">
      <path d="M353 101l-3 36M348 167l-2 38M363 152l38 1M332 148l-36 1M359 139l28-22M334 163l-27 20M340 141l-22-33M357 165l23 28"/>
    </g>
  </g>
</svg>
`
const width = 109
const height = 109
const { markup, attrs } = Markup.xml2json(svg)

const node = graph.addNode({
  shape: 'empty',
  x: 100,
  y: 100,
  width,
  height,
  markup,
  attrs,
})
fix(node); // important!

function fix(node) {
  const anchor = '> svg'
  const { width, height } = node.getAttrByPath(anchor)

  node.setAttrByPath('> svg', {
    refWidth: '100%',
    refHeight: '100%',
    viewBox: `0 0 ${width} ${height}`
  })
}