<template>
    <div class="svg-map">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            viewBox="0 0 745.3 399" style="enable-background:new 0 0 745.3 399;" xml:space="preserve">

            <image style="overflow:visible;" width="912" height="399" id="map-main"
                xlink:href="data:image/png;base64,[encoded data, 497944 characters]"
                transform="matrix(1 0 0 1 -166.6753 9.6679)"> </image>

            <image style="overflow:visible;" width="409" height="200" id="map-mask-float-down"
                xlink:href="data:image/png;base64,[encoded data, 25720 characters]"
                transform="matrix(1 0 0 1 185.3685 166.1679)"> </image>
            <image style="overflow:visible;" width="740" height="337" id="map-mask-float-up"
                xlink:href="data:image/png;base64,[encoded data, 35980 characters]"
                transform="matrix(1 0 0 1 3 11.6679)"> </image>

            <image style="overflow:visible;" width="912" height="368" id="map-img-float-up"
                xlink:href="data:image/png;base64,[encoded data, 322912 characters]"
                transform="matrix(1 0 0 1 -166.6753 0)"> </image>
            <image style="overflow:visible;" width="410" height="230" id="map-img-float-down"
                xlink:href="data:image/png;base64,[encoded data, 165220 characters]"
                transform="matrix(1 0 0 1 184.0929 153.7653)">
            </image>
        </svg>
    </div>
</template>

<script>
    export default {
        // 名称
        name: "SvgMap",
        // 使用组件
        components: {},
        // 传入参数
        props: {},
        // 自定义事件
        emits: {},
        // 数据
        data() {
            return {
                activeId: ""
            };
        },
        // 函数
        methods: {
            click: function(id) {
                this.activeId = id;
            },
            mouseover() {},
        },
        // 生命周期钩子
        beforeCreate() {
            // 创建前
        },
        created() {
            // 创建后
        },
        beforeMount() {
            // 渲染前
        },
        mounted() {
            // 渲染后
        },
        beforeUpdate() {
            // 数据更新前
        },
        updated() {
            // 数据更新后
        },
    };
</script>

<style lang="less">
    .svg-map {
        position: relative;

        svg {
            position: absolute;
            left: 0;
        }

        #map-img-float-down,
        #map-img-float-up {
            opacity: 0;

            &:hover {
                opacity: 1;
            }
        }

        #map-mask-float-up {
            display:none;
        }
    }
</style>
