Interactive SVG-Map

HTML

<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080.4" enable-background="new 0 0 1920 1080.4" xml:space="preserve">
    <switch>
        <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
            <i:pgfRef xlink:href="#adobe_illustrator_pgf"></i:pgfRef>
        </foreignObject>
        <g i:extraneous="self">
            <g id="Haus">
                <g id="waende_1_">
                    <polygon id="waendeSub" points="1451.1,647.3 1610,647.3 1610,481.3 1582,481.3 1582,463.3 1598,463.3 1598,123.3 1169,123.3 
                    1169,463.3 1488,463.3 1487.9,480.2 1047.3,481.3 1047.2,468.3 1147,468.3 1147,123.3 797,123.3 797,468.3 953,468.3 953,481.3 
                    785.1,481.3 785.5,123.3 453.4,123.3 451.8,501.3 433,501.3 433,712.3 791.5,712.3 791.6,725.3 433.3,725.3 434.1,956.3 
                    637,956.3 637,972.3 970.8,972.3 970.5,730.4 970.5,724.9 950.2,724.9 788,724.7 788,712.3 867.8,712.3 867.7,725.3 
                    991.7,725.3 990.8,997.8 405,997.1 405,484.1 423.4,484.6 425.7,98.3 1628,98.3 1628,663.3 1466.5,663.3 1466.8,730.5 
                    970.5,730.5 970.5,724.9 962.1,724.9 962,712 1451.3,711.9                " />
                </g>
                <g id="terasseLine">
                    <g>
                        <line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="887" y1="997.3" x2="898" y2="997.3" />
                        <line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="22,4" x1="902" y1="997.3" x2="1614" y2="997.3" />
                        <polyline fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="1616,997.3 1627.2,997.3 
                        1627.1,986.3                    " />
                        <line fill="none" stroke="#000000"...

CSS

svg {
    height: 50vw;
}
path.eckig {
    /*die Pfade mit Klasse eckig (Farbflächen)*/
    fill: #FFFFFF;
    opacity: 0;
    transition: .6s fill;
}
path.eckig:hover, rect.eckig:hover {
    fill: #ff7bac;
    opacity: 1;
}
polygon.terasse {
    fill: #FFFFFF;
    opacity: 0;
    transition: .6s fill;
}
polygon.terasse:hover {
    fill: #7ac943;
    opacity: 1;
}