mxgraph 怎么给自定义svg图片添加动效

要给自定义的 SVG 图片添加动效，可以使用 mxGraph 的内置动画功能。具体步骤如下：

1. 将 SVG 图片转换为 mxGraph 的 shape 对象，可以使用以下代码：

var svgDoc = mxUtils.parseXml(svgString);
var svgNode = svgDoc.documentElement;
var shape = new mxImageShape(new mxImage(svgNode.getAttribute('src'), 24, 24), 24, 24);

其中，`svgString` 是 SVG 图片的字符串表示，`24, 24` 是图片的宽高。

2. 创建动画对象，可以使用以下代码：

var anim = new mxAnimation({
    delay: 0,
    duration: 1000,
    timingFunction: mxConstants.EASE_OUT,
    step: mxUtils.bind(this, function (current) {
        // update shape state
    })
});

其中，`delay` 是动画延迟时间，`duration` 是动画持续时间，`timingFunction` 是动画时间函数，`step` 是动画执行时的回调函数。

3. 将动画对象绑定到 shape 对象上，可以使用以下代码：

mxUtils.setPrefixedStyle(shape.node.style, 'animation', anim.css);
anim.start();

其中，`mxUtils.setPrefixedStyle` 是一个工具函数，用于设置浏览器前缀的 CSS 样式。

4. 在动画执行的回调函数中更新 shape 对象的状态，可以使用以下代码：

shape.bounds = new mxRectangle(
    x + current * (targetX - x),
    y + current * (targetY - y),
    width + current * (targetWidth - width),
    height + current * (targetHeight - height)
);

其中，`x, y, width, height` 是初始状态，`targetX, targetY, targetWidth, targetHeight` 是目标状态。

综上，以上是给自定义 SVG 图片添加动效的基本步骤，具体实现需要根据具体需求进行调整。