实现的案例效果如下：

实现过程：

1、首先需要找到地图容器，在地图容器中动态添加SVG图形，并且保证SVG图形位于其他交互图层的底部，防止其他图层被遮挡，导致交互事件失败。

地图容器对应的html元素id为map.id+“_gc”

通过使用prepend将svg添加到最底层

$('#map_gc').prepend(` <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:block" id="addSVG"> <polyline points="0 0, 30 0, 15 30" style="fill: #1D7DB1;"></polyline></svg>`)

2、生成的SVG使用Css进行动画控制

添加闪烁点，并加载到SVG下
html += ` <circle class="flash-circle" cx="` + pox + `" cy="` + poy + `" r="8" stroke="red" fill="red" /> `
$('#addSVG').html(html);

闪烁css  flash-circle

@keyframes morph {
    0% {
        stroke-width: 10;
        stroke-opacity: 0.1;
    }

    25% {
        stroke-width: 30;
        stroke-opacity: 0.3;
    }

    50% {
        stroke-width: 10;
        stroke-opacity: 0.5;
    }

    75% {
        stroke-width: 10;
        stroke-opacity: 0.3;
    }

    100% {
        stroke-width: 10;

        stroke-opacity: 0.0;
    }
}

.flash-circle {
    -webkit-animation: morph 1s ease infinite ;
    animation: morph 1s ease infinite;
}

3、对地图的平移缩放事件进行绑定，使SVG元素位置跟随同步

主要是需要获取屏幕坐标进行位置重计算。

平移时获取增量
map.on('pan-end', function (e) {
            panx += e.delta.x;
            pany += e.delta.y;
})
//缩放开始重置panx,pany值为0
 map.on('zoom-start', function () {
            if ($('#addSVG').length > 0) {
                $('#addSVG').empty();
            }
            panx = 0; pany = 0;
        })
//缩放结束后，重新绘制SVG
        map.on('zoom-end', function () {
            if (graphicsLayerAdd.graphics.length > 0) {
                var html = ``;
                graphicsLayerAdd.graphics.forEach(f => {
                    var graphic = new Graphic(new Point(f.geometry.x, f.geometry.y, new SpatialReference({ wkid: 4490 })), symbol);
                if ($('#addSVG').length > 0) {
                    $('#addSVG').empty();
                }
                if ($('#map_gc').length > 0) {
                    if ($('#addSVG').length == 0) {
                        $('#map_gc').prepend(` <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:block" id="addSVG"> <polyline points="0 0, 30 0, 15 30" style="fill: #1D7DB1;"></polyline></svg>`)
                    }

                    var pt = new Point(f.geometry.x, f.geometry.y, new SpatialReference({ wkid: 4326 }))
                    var screenPoint = map.toScreen(pt); //转为屏幕坐标
                    var mapPositon = map.toMap(screenPoint);//转为地图坐标
                    screenPoint = map.toScreen(mapPositon);
                    //使用屏幕坐标计算新位置
                    let pox = screenPoint.x - panx; 
                    let poy = screenPoint.y - pany;
                    html += ` <circle class="flash-circle" cx="` + pox + `" cy="` + poy + `" r="8" stroke="red" fill="red" /> `


                }
            })
                $('#addSVG').html(html);
            }
        })

添加SVG生成动画的主要代码

 function addFeaturesAnimation(e, layer) {
            //本年记录了前一年要新增的要素
            let time = 3000;//3秒
            graphicsLayerAdd.clear();

            var html = ``;
            if (changeDataCache[layer.id] && changeDataCache[layer.id].adds.length > 0) {
                changeDataCache[layer.id].adds.forEach(f => {
                    var graInfo = new InfoTemplate();
                graInfo.setTitle("医院" + d);
                graInfo.setContent("<div class=\"layui-card-header\">" + f.attributes.name + "</div>" +
                    "<div class=\"layui-card-body\">地址：" + f.attributes.address + "</div>" +
                    "<div class=\"layui-card-body\"> 电话：" + f.attributes.phone + " </div>");
                var graphic = new Graphic(new Point(f.geometry.x, f.geometry.y,new SpatialReference({ wkid: 4490 })), symbol, f, graInfo);
                graphicsLayerAdd.add(graphic);
                var label = new TextSymbol(f.attributes.name).setColor('#fff')
                    .setOffset(0, 35).setFont(font).setHaloColor(new esri.Color([56, 186, 156]))
                    .setHaloSize(5);
                var graphictext = new Graphic(new Point(f.geometry.x, f.geometry.y,new SpatialReference({ wkid: 4490 })), label);
                graphicsLayerAdd.add(graphictext);
                graphicsLayer.add(graphic)
                if ($('#addSVG').length > 0) {
                    $('#addSVG').empty();
                }
                if ($('#map_gc').length > 0) {
                    if ($('#addSVG').length == 0) {
                        $('#map_gc').prepend(` <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none" id="addSVG"> </svg>`)
                    }

                    var pt = new Point(f.geometry.x, f.geometry.y, new SpatialReference({ wkid: 4326 }))
                    var screenPoint = map.toScreen(pt);
                    var mapPositon = map.toMap(screenPoint);
                    screenPoint = map.toScreen(mapPositon);

                    let pox = screenPoint.x - panx ;
                    let poy = screenPoint.y - pany;
                    html += ` <circle class="flash-circle" cx="` + pox + `" cy="` + poy + `" r="8" stroke="red" fill="red" /> `


                }
            })
                $('#addSVG').html(html);
                //var graphicImages = $('#add_layer').children("image")

                //$('#addSVG').hide();
                $('#add_layer').css('animation', 'show 3s ease');
                timeoutAdd1=setTimeout(function () {

                    //$('#add_layer').css('display', 'none');
                    $('#addSVG').show();
                }, time);
                return time * 2;
            }
            return time / 2;//无需要展示新增动画时
        }