openplayers使用svg图标

<template>
    <div class="myMap">
        <div id="map" style="height: 100%; width: 100%;"></div>
    </div>
</template>
<script>
    import "ol/ol.css";
    import Map from "ol/Map";
    import Feature from "ol/Feature";
    import {
        OSM,
        Vector as VectorSource,
    } from "ol/source";
    import Point from 'ol/geom/Point';
    import {
        Tile as TileLayer,
        Vector as VectorLayer
    } from "ol/layer";
    import View from "ol/View";
    import {
        Icon,
        Style,
    } from 'ol/style';
    import {
        transform,
    } from 'ol/proj';
    import {
        onMounted,
    } from 'vue';
    export default {
        setup() {
            let map = null;
            onMounted(() => {
                var osmLayer = new TileLayer({
                    source: new OSM()
                });
                var pointLayer = new VectorLayer({
                    source: new VectorSource()
                });
                map = new Map({
                    layers: [
                        osmLayer,
                        pointLayer,
                    ],
                    target: "map",
                    view: new View({
                        // center: transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
                        // 设置地图中心范围
                        // extent: [102, 29, 104, 31],
                        // 设置成都为地图中心
                        center: [104.06, 30.67],
                        // 指定投影使用EPSG:4326
                        projection: 'EPSG:4326',
                        zoom: 10,
                        // 限制地图缩放最大级别为14，最小级别为10
                        // minZoom: 10,
                        // maxZoom: 14
                    })
                });
                var anchor = new Feature({
                    geometry: new Point([104.06, 30.67])
                });

                // 构建svg的Image对象
                var svg =
                    '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">' +
                    '<path fill="#156BB1" d="M22.906,10.438c0,4.367-6.281,14.312-7.906,17.031c-1.719-2.75-7.906-12.665-7.906-17.031S10.634,2.531,15,2.531S22.906,6.071,22.906,10.438z"/>' +
                    '<circle fill="#FFFFFF" cx="15" cy="10.677" r="3.291"/></svg>';
                var mysvg = new Image();
                mysvg.src = 'data:image/svg+xml,' + escape(svg);
                anchor.setStyle(new Style({
                    image: new Icon({
                        img: mysvg, // 设置Image对象
                        imgSize: [30, 30] // 及图标大小
                        //          src: 'http://www.williambuck.com/portals/0/Skins/WilliamBuck2014/images/location-icon.svg',
                        //          size: [30, 30]
                    })
                }));
                pointLayer.getSource().addFeature(anchor);
            })

            return {}
        }
    }
</script>

<style lang="less" scoped>
    .myMap {
        height: 100%;
        width: 100%;

        #anchor {
            cursor: pointer;
        }

        .navigate-container {
            position: absolute;
            bottom: 50px;
            margin-left: 500px;
        }
    }
</style>