带有弹窗和微动画的交互式SVG都市游览地图

svg city travel map with popup window and interactive animation

svg, city, map

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3557
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

jQuery(document).ready(function($) {
    //open popup
    console.log("loaded");

$('.industrie').on('click', function(event) {
        event.preventDefault();
        $('.cd-popup-industrie').addClass('is-visible');
    });
    $('.software').on('click', function(event) {
        event.preventDefault();
        $('.cd-popup-software').addClass('is-visible');
    });
    $('.banking').on('click', function(event) {
        event.preventDefault();
        $('.cd-popup-banking').addClass('is-visible');
    });
    $('.telco').on('click', function(event) {
        event.preventDefault();
        $('.cd-popup-telco').addClass('is-visible');
    });
    $('.gesundheit').on('click', function(event) {
        event.preventDefault();
        $('.cd-popup-gesundheit').addClass('is-visible');
    });
    $('.luftfahrt').on('click', function(event) {
        event.preventDefault();
        $('.cd-popup-luftfahrt').addClass('is-visible');
    });
    $('.energie').on('click', function(event) {
        event.preventDefault();
        $('.cd-popup-energie').addClass('is-visible');
    });
    $('.transport').on('click', function(event) {
        event.preventDefault();
        $('.cd-popup-transport').addClass('is-visible');
    });

//close popup
    $('.cd-popup').on('click', function(event) {
        if ($(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup')) {
            event.preventDefault();
            $(this).removeClass('is-visible');
        }
    });
    //close popup when clicking the esc keyboard button
    $(document).keyup(function(event) {
        if (event.which == '27') {
            $('.cd-popup').removeClass('is-visible');
        }
    });

// TODO if modal open then pop out items
});

编译

CSS

line {
    color: black;
    opacity: 0.6;
    /*stroke: #9D7CBF;*/
    
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 0.5 10;
    animation: animation_bfcj4x 400ms linear infinite;
    -webkit-animation: animation_bfcj4x 400ms linear infinite;
}
@-webkit-keyframes animation_bfcj4x {
    to {
        stroke-dashoffset: 10;
    }
}
@-moz-keyframes animation_bfcj4x {
    to {
        stroke-dashoffset: 10;
    }
}
@-o-keyframes animation_bfcj4x {
    to {
        stroke-dashoffset: 10;
    }
}
@keyframes animation_bfcj4x {
    to {
        stroke-dashoffset: 10;
    }
}
.airplane {
    animation: airplaneHovering 5s infinite;
}
@-webkit-keyframes airplaneHovering {
    0% {
        transform: translateY(5px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(5px);
    }
}
@-moz-keyframes airplaneHovering {
    0% {
        transform: translateY(5px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(5px);
    }
}
@-o-keyframes airplaneHovering {
    0% {
        transform: translateY(5px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(5px);
    }
}
@keyframes airplaneHovering {
    0% {
        transform: translateY(5px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(5px);
    }
}
svg g circle {
    animation: pulse 4s infinite;
    -webkit-animation: pulse 4s infinite;
    transform-origin: center center;
    overflow: visible;
    background-color: black;
}
.icon-circle {
    z-index: 20;
}
.icon,
.icon-circle,
icon-circle-first {
    cursor: pointer;
}
.icon-circle-first {
    transform-origin: center center;
    animation: pulse-me 3s linear infinite;
}
.icon {
    animation: icon-pulse 0.4 infinite;
    -webkit-animation: icon-pulse 4s infinite;
    overflow: visible;
}
@keyframes icon-pulse {
    0% {
        transform: scale(0.9985, 0.9985)
    }
    25% {
        transform: scale(0.9985, 1.001)
    }
    50% {
        transform: scale(1.001, 1.001)
    }
    75% {
        transform: scale(1.001, 0.9985)
    }
    100% {
        transform: scale(0.9985, 0.9985)
    }
}
@-webkit-keyframes pulse {
    0% {
        opacity: 0.2;
    }
    25% {
        opacity: 0.275;
    }
    50% {
        opacity: 0.35;
    }
    75% {
        opacity: 0.275;
    }
    100% {
        opacity: 0.2;
    }
}
@-moz-keyframes pulse {
    0% {
        opacity: 0.2;
    }
    25% {
        opacity: 0.275;
    }
    50% {
        opacity: 0.35;
    }
    75% {
        opacity: 0.275;
    }
    100% {
        opacity: 0.2;
    }
}
@-o-keyframes pulse {
    0% {
        opacity: 0.2;
    }
    25% {
        opacity: 0.275;
    }
    50% {
        opacity: 0.35;
    }
    75% {
        opacity: 0.275;
    }
    100% {
        opacity: 0.2;
    }
}
@keyframes pulse {
    0% {
        opacity: 0.2
    }
    25% {
        opacity: 0.275
    }
    50% {
        opacity: 0.35
    }
    75% {
        opacity: 0.275
    }
    100% {
        opacity: 0.2
    }
}
@-webkit-keyframes pulse-me {
    0% {
        r: 30;
        opacity: 0;
    }
    50% {
        opacity: 0.1;
    }
    70% {
        opacity: 0.09;
    }
    100% {
        r: 75;
        opacity: 0;
    }
}
@-moz-keyframes pulse-me {
    0% {
        r: 30;
        opacity: 0;
    }
    50% {
        opacity: 0.1;
    }
    70% {
        opacity: 0.09;
    }
    100% {
        r: 75;
        opacity: 0;
    }
}
@-o-keyframes pulse-me {
    0% {
        r: 30;
        opacity: 0;
    }
    50% {
        opacity: 0.1;
    }
    70% {
        opacity: 0.09;
    }
    100% {
        r: 75;
        opacity: 0;
    }
}
@keyframes pulse-me {
    0% {
        r: 30;
        opacity: 0;
    }
    50% {
        opacity: 0.1;
    }
    70% {
        opacity: 0.09;
    }
    100% {
        r: 75;
        opacity: 0;
    }
}
/* --------------------------------

Primary style

-------------------------------- */

html * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-size: 100%;
    font-family: "Lato", sans-serif;
    background-color: white;
    /*#ffd88f;*/
}
/* --------------------------------

Modules - reusable parts of our design

-------------------------------- */

.img-replace {
    /* replace text with an image */
    
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    color: transparent;
    white-space: nowrap;
}
/* xpopup */

.cd-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(98, 98, 98, 0.7);
    color: rgba(53, 47, 38, 1);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
    transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-popup.is-visible {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup-container {
    position: relative;
    width: 90%;
    max-width: 500px;
    margin: 4em auto;
    background: rgba(255, 255, 255, 1);
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
    /* Force Hardware Acceleration in WebKit */
    
    -webkit-backface-visibility: hidden;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.cd-popup-container h1,
h2 {
    padding-top: 1.5em;
    padding-bottom: 0.5em;
}
.cd-popup-container p {
    padding: 0.5em 35px;
    text-align: left;
}
.cd-popup-container .cd-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
}
.cd-popup-container .cd-popup-close::before,
.cd-popup-container .cd-popup-close::after {
    content: '';
    position: absolute;
    top: 12px;
    width: 14px;
    height: 3px;
    background-color: rgb(0, 0, 0);
}
.cd-popup-container .cd-popup-close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 8px;
}
.cd-popup-container .cd-popup-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 8px;
}
.is-visible .cd-popup-container {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
@media only screen and (min-width: 1170px) {
    .cd-popup-container {
        margin: 8em auto;
    }
}
/* chips */

.md-chip {
    display: inline-block;
    background: black;
    /* rgba(156, 142, 112, 1); */
    
    color: rgba(244, 241, 237, 1);
    padding: 0 12px;
    border-radius: 0px;
    /* 32px; */
    
    font-size: 13px;
}
.md-chip,
.md-chip-icon {
    height: 32px;
    line-height: 32px;
}
.md-chip-icon {
    display: block;
    float: left;
    background: #009587;
    width: 32px;
    border-radius: 50%;
    text-align: center;
    color: white;
    margin: 0 8px 0 -12px;
}
.md-chips {
    padding: 0.5em 1em;
    padding-bottom: 1.5em;
}
.md-chips .md-chip {
    margin: 3px;
}
/* specific close */
/*
.container-gesundheit .cd-popup-close::before {
  background-color: rgba(148, 206, 6, 1);  
}
.container-gesundheit .cd-popup-close::after {
  background-color: rgba(148, 206, 6, 1);  
}
.close-industrie {
  
}
*/
/* nav */

.icon-snacks {} .menu-item,
.menu-open-button {
    background: #EEEEEE;
    border-radius: 100%;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    position: absolute;
    color: #FFFFFF;
    text-align: center;
    line-height: 80px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform ease-out 200ms;
    transition: -webkit-transform ease-out 200ms;
    transition: transform ease-out 200ms;
    transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.icon-snack {
    margin-left: -40px;
    border-radius: 100%;
    width: 80px;
    position: absolute;
    color: #FFFFFF;
    text-align: center;
    line-height: 30px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform ease-out 200ms;
    transition: -webkit-transform ease-out 200ms;
    transition: transform ease-out 200ms;
    transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
    display: inline-block;
    background: rgba(156, 142, 112, 1);
    color: rgba(244, 241, 237, 1);
    padding: 0 12px;
    border-radius: 32px;
    font-size: 13px;
}
.icon-snack:nth-child(3) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.icon-snack:nth-child(4) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.icon-snack:nth-child(5) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.icon-snack:nth-child(6) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.icon-snack:nth-child(7) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.icon-snack:nth-child(8) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.icon-snack:nth-child(9) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.menu-open:checked ~ .icon-snack {
    -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
    transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .icon-snack:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
    transform: translate3d(0.08361px, -104.99997px, 0);
}
.menu-open:checked ~ .icon-snack:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
    transform: translate3d(90.9466px, -52.47586px, 0);
}
.menu-open:checked ~ .icon-snack:nth-child(5) {
    transition-duration: 380ms;
    -webkit-transition-duration: 380ms;
    -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
    transform: translate3d(90.9466px, 52.47586px, 0);
}
.menu-open:checked ~ .icon-snack:nth-child(6) {
    transition-duration: 480ms;
    -webkit-transition-duration: 480ms;
    -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
    transform: translate3d(0.08361px, 104.99997px, 0);
}
.menu-open:checked ~ .icon-snack:nth-child(7) {
    transition-duration: 580ms;
    -webkit-transition-duration: 580ms;
    -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
    transform: translate3d(-90.86291px, 52.62064px, 0);
}
.menu-open:checked ~ .icon-snack:nth-child(8) {
    transition-duration: 680ms;
    -webkit-transition-duration: 680ms;
    -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
    transform: translate3d(-91.03006px, -52.33095px, 0);
}
.menu-open:checked ~ .icon-snack:nth-child(9) {
    transition-duration: 780ms;
    -webkit-transition-duration: 780ms;
    -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
    transform: translate3d(-0.25084px, -104.9997px, 0);
}
.menu-open {
    display: none;
}
.lines {
    width: 25px;
    height: 3px;
    background: #596778;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12.5px;
    margin-top: -1.5px;
    -webkit-transition: -webkit-transform 200ms;
    transition: -webkit-transform 200ms;
    transition: transform 200ms;
    transition: transform 200ms, -webkit-transform 200ms;
}
.line-1 {
    -webkit-transform: translate3d(0, -8px, 0);
    transform: translate3d(0, -8px, 0);
}
.line-2 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.line-3 {
    -webkit-transform: translate3d(0, 8px, 0);
    transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .line-1 {
    -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
    transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .line-2 {
    -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
    transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .line-3 {
    -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
    transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
    margin: auto;
    position: absolute;
    top: 400px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80px;
    height: 80px;
    text-align: center;
    box-sizing: border-box;
    font-size: 26px;
}
/* .menu-item {
   transition: all 0.1s ease 0s;
} */

.menu-item:hover {
    background: #EEEEEE;
    color: #3290B1;
}
.menu-item:nth-child(3) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.menu-item:nth-child(4) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.menu-item:nth-child(5) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.menu-item:nth-child(6) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.menu-item:nth-child(7) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.menu-item:nth-child(8) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.menu-item:nth-child(9) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
}
.menu-open-button {
    z-index: 2;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
    transform: scale(1.1, 1.1) translate3d(0, 0, 0);
    cursor: pointer;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}
.menu-open-button:hover {
    -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
    transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
    -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
    transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
    -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
    transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
    transform: translate3d(0.08361px, -104.99997px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
    transform: translate3d(90.9466px, -52.47586px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
    transition-duration: 380ms;
    -webkit-transition-duration: 380ms;
    -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
    transform: translate3d(90.9466px, 52.47586px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
    transition-duration: 480ms;
    -webkit-transition-duration: 480ms;
    -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
    transform: translate3d(0.08361px, 104.99997px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
    transition-duration: 580ms;
    -webkit-transition-duration: 580ms;
    -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
    transform: translate3d(-90.86291px, 52.62064px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(8) {
    transition-duration: 680ms;
    -webkit-transition-duration: 680ms;
    -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
    transform: translate3d(-91.03006px, -52.33095px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(9) {
    transition-duration: 780ms;
    -webkit-transition-duration: 780ms;
    -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
    transform: translate3d(-0.25084px, -104.9997px, 0);
}
.blue {
    background-color: #669AE1;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.blue:hover {
    color: #669AE1;
    text-shadow: none;
}
.green {
    background-color: #70CC72;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.green:hover {
    color: #70CC72;
    text-shadow: none;
}
.red {
    background-color: #FE4365;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.red:hover {
    color: #FE4365;
    text-shadow: none;
}
.purple {
    background-color: #C49CDE;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.purple:hover {
    color: #C49CDE;
    text-shadow: none;
}
.orange {
    background-color: #FC913A;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.orange:hover {
    color: #FC913A;
    text-shadow: none;
}
.lightblue {
    background-color: #62C2E4;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.lightblue:hover {
    color: #62C2E4;
    text-shadow: none;
}
.credit {
    margin: 24px 20px 120px 0;
    text-align: right;
    color: #EEEEEE;
}
.credit a {
    padding: 8px 0;
    color: #C49CDE;
    text-decoration: none;
    transition: all 0.3s ease 0s;
}
.credit a:hover {
    text-decoration: underline;
}
/* svg */

.st0 {
    clip-path: url(#SVGID_2_);
    fill: #DADADA;
}
.st1 {
    fill: #E2E2E2;
}
.st2 {
    fill: #E4D7C1;
}
.st3 {
    opacity: 0.2;
    fill: #1D1D1B;
}
.st4 {
    opacity: 0.2;
    fill: #1D1D1D;
}
.st5 {
    opacity: 0.3;
    fill: #683C11;
}
.st6 {
    fill: #B1B1B1;
}
.st7 {
    opacity: 0.04;
}
.st8 {
    opacity: 0.08;
}
.st9 {
    opacity: 0.15;
}
.st10 {
    fill: #84BFCB;
}
.st11 {
    opacity: 0.1;
    fill: #DBCAAD;
}
.st12 {
    opacity: 0.3;
    fill: none;
    stroke: #683C11;
    stroke-miterlimit: 10;
}
.st13 {
    clip-path: url(#SVGID_4_);
    fill: #DADADA;
}
.st14 {
    fill: #1D1D1D;
}
.st15 {
    fill: #EBEBEB;
}
.st16 {
    fill: #EDE5D6;
}
.st17 {
    fill: #EDEDED;
}
.st18 {
    fill: #507E50;
}
.st19 {
    fill: #EE7633;
}
.st20 {
    fill: #EEC7B2;
}
.st21 {
    opacity: 0.3;
    fill: none;
    stroke: #F9BE03;
    stroke-miterlimit: 10;
}
.st22 {
    fill: #575756;
}
.st23 {
    fill: #8B8B8B;
}
.st24 {
    fill: #8D8D8D;
}
.st25 {
    fill: #8ECE29;
}
.st26 {
    opacity: 0.3;
    fill: none;
    stroke: #F73E26;
    stroke-miterlimit: 10;
}
.st27 {
    opacity: 0.3;
    fill: none;
    stroke: #5D7C93;
    stroke-miterlimit: 10;
}
.st28 {
    fill: #F1F1F1;
}
.st29 {
    fill: #23BCF9;
}
.st30 {
    fill: #F3EEE9;
}
.st31 {
    fill: #F4F1ED;
}
.st32 {
    opacity: 0.4;
    fill: #1D1D1D;
}
.st33 {
    fill: #F6F2EA;
}
.st34 {
    fill: #F73E26;
}
.st35 {
    fill: #292929;
}
.st36 {
    fill: #5D7C93;
}
.st37 {
    fill: #F8F8F8;
}
.st38 {
    fill: #F9BE03;
}
.st39 {
    opacity: 0.1;
    fill: #1D1D1B;
}
.st40 {
    opacity: 0.1;
    fill: #1D1D1D;
}
.st41 {
    opacity: 0.3;
    fill: none;
    stroke: #6F6F6E;
    stroke-miterlimit: 10;
}
.st42 {
    fill: #2D2D2C;
}
.st43 {
    fill: #2D2D2D;
}
.st44 {
    fill: #FBF9F8;
}
.st45 {
    fill: #FBFBFB;
}
.st46 {
    fill: #C8E2E8;
}
.st47 {
    fill: #FCFCFC;
}
.st48 {
    opacity: 0.1;
}
.st49 {
    fill: #FEFEFE;
}
.st50 {
    fill: #6193B2;
}
.st51 {
    fill: #FFFFFF;
}
.st52 {
    opacity: 0.3;
    fill: none;
    stroke: #8ECE29;
    stroke-miterlimit: 10;
}
.st53 {
    opacity: 0.5;
    fill: none;
    stroke: #5EBAE7;
    stroke-miterlimit: 10;
}
.st54 {
    fill: #656565;
}
.st55 {
    fill: #683C11;
}
.st56 {
    fill: #695F4C;
}
.st57 {
    opacity: 0.5;
    fill: none;
    stroke: #352F26;
    stroke-miterlimit: 10;
}
.st58 {
    fill: #9E8E72;
}
.st59 {
    fill: #352F26;
}
.st60 {
    fill: #005461;
}
.st61 {
    fill: #6F6F6E;
}
.st62 {
    opacity: 0.3;
    fill: #1D1D1D;
}
.st63 {
    opacity: 0.3;
    fill: none;
    stroke: #23BCF9;
    stroke-miterlimit: 10;
}
.st64 {
    fill: #D2BD98;
}
.st65 {
    clip-path: url(#SVGID_2_);
    fill: #695F4C;
}
.st66 {
    fill: #3A3A3A;
}
.st67 {
    fill: #D5D5D5;
}
.st68 {
    fill: #3C3C3B;
}
.st69 {
    fill: #D8D8D8;
}
.st70 {
    opacity: 0.3;
    fill: #575756;
}
.st71 {
    opacity: 0.3;
    fill: #8ECE29;
}
.st72 {
    opacity: 0.1;
    fill: #695F4C;
}
.st73 {
    opacity: 0.1;
    fill: #9E8E72;
}
.st74 {
    fill: #DADADA;
}
.st75 {
    opacity: 0.3;
    fill: #23BCF9;
}
.st76 {
    fill: #DBCAAD;
}
.st77 {
    fill: #DBDBDB;
}
.st78 {
    fill: #DDDDDD;
}
.st79 {
    opacity: 0.4;
    fill: #D2BD98;
}
.st80 {
    opacity: 0.3;
    fill: #F73E26;
}
.st81 {
    fill: #434343;
}
.st82 {
    opacity: 0.3;
    fill: #5D7C93;
}
.st83 {
    opacity: 0.3;
    fill: #F9BE03;
}

HTML

<div class="cd-popup cd-popup-industrie" role="alert">
    <div class="cd-popup-container">
        <h2>Industrie</h2>
        <p>Wenn Bauteile eigenständig mit der Produktionsanlage kommunizieren und bei Bedarf selbst eine Reparatur veranlassen oder Material nachbestellen - wenn sich Menschen, Maschinen und industrielle Prozesse intelligent vernetzen, dann sprechen wir
            von Industrie 4.0. Nach Dampfmaschine, Fließband und Computer stehen wir nun mit intelligenten Fabriken vor der vierten industriellen Revolution. Durch die Verzahnung von Produktion mit modernster Informations- und Kommunikationstechnik können
            Produkte kostengünstiger, effizienter und nach individuellen Kundenwünschen hergestellt werden. Gleichzeitig stellt die Digitalisierung die Industrie vor große Herausforderungen: Neue Daten, Vernetzung, Automatisierung und die digitale Kundenschnittstelle
            erfordern von Unternehmen, ihre Geschäftsprozesse und -modelle zu hinterfragen, um neue Möglichkeiten zu erkennen, zu entwickeln und umzusetzen.
        </p>
        <div class="md-chips">
            <div class="md-chip">Industrie 4.0</div>
            <div class="md-chip">Künstliche Intelligenz</div>
            <div class="md-chip">Machine Learning</div>
            <div class="md-chip">Robotik</div>
            <div class="md-chip">Automatisierung</div>
            <div class="md-chip">Cloud Computing</div>
            <div class="md-chip">Big Data</div>
            <div class="md-chip">3D Druck</div>
        </div>
        <a href="#0" class="cd-popup-close img-replace">Close</a>
    </div>
    
</div>

<div class="cd-popup cd-popup-software" role="alert">
    <div class="cd-popup-container">
        <h2>Software</h2>
        <p>Ob vernetzter Kühlschrank, smarter Lautsprecher oder das selbstfahrende Auto: Die Produkte und Dienstleistungen der Zukunft definieren sich in erster Linie über Software und Technologien. Das verlangt schon in der Entwicklung völlig neue und flexible
            Herangehensweisen.
        </p>
        <div class="md-chips">
            <div class="md-chip">Künstliche Intelligenz</div>
            <div class="md-chip">Machine Learning</div>
            <div class="md-chip">API</div>
            <div class="md-chip">Big Data</div>
            <div class="md-chip">Cloud</div>
            <div class="md-chip">Agile Entwicklung</div>
        </div>
        <a href="#0" class="cd-popup-close img-replace">Close</a>
    </div>
    
</div>

<div class="cd-popup cd-popup-telco" role="alert">
    <div class="cd-popup-container">
        <h2>Telekommunikation</h2>
        <p>Die Telekommunikationsbranche bildet mit ihrer Netzinfrastruktur vor allem für den Mobilfunk das Rückgrat der Digitalisierung und profitiert bereits von dieser Infrastruktur. Um in Zukunft nicht nur als Kooperationspartner für Serviceinnovationen
            herzuhalten, müssen Telekommunikationsunternehmen die idealen Voraussetzungen noch proaktiver nutzen. Es gilt, das veränderte Kundenverhalten zum eigenen Vorteil zu gestalten, indem die Bandbreite an digitalen Dienstleistungen erhöht beziehungsweise
            ins Serviceportfolio mit aufgenommen wird und man sich nicht nur als Infrastrukturanbieter versteht, sondern Trends wie das Internet der Dinge und die Möglichkeiten durch Big Data zum eigenen Vorteil macht, um eigene Services zu differenzieren
            und neue Wege der Kundeninteraktion zu entwickeln.
        </p>
        <div class="md-chips">
            <div class="md-chip">Datengeschwindigkeit</div>
            <div class="md-chip">AR / VR</div>
            <div class="md-chip">IoT</div>
            <div class="md-chip">Machine-to-Machine-Kommunikation</div>
        </div>
        <a href="#0" class="cd-popup-close img-replace">Close</a>
    </div>
    
</div>

<div class="cd-popup cd-popup-gesundheit" role="alert">
    <div class="cd-popup-container container-gesundheit">
        <h2>Gesundheit & Pflege</h2>
        <p>In der Gesundheits- und Pflegewirtschaft spielt die Digitalisierung eine immer wichtigere Rolle und umfasst dabei verschiedene Bereiche: von der elektronischen Patientenakte über intelligente Analyse- und Prognoseverfahren bis hin zur Telemedizin.
            Chancen liegen vor allem in einer besseren Vernetzung im Gesundheitssystem, aber auch darin, in unterversorgten Bereichen Routinebehandlungen elektronisch zu unterstützen und die berufliche IKT-Qualifizierung zu stärken. Mit der Entbürokratisierung
            der Pflegedokumentation hat sich ein neues Handlungsfeld für die digitale Transformation in der Pflege geöffnet.
        </p>
        <div class="md-chips">
            <div class="md-chip">Sensorik</div>
            <div class="md-chip">Wearables</div>
            <div class="md-chip">mHealth</div>
            <div class="md-chip">eHealth</div>
            <div class="md-chip">Big Data</div>
        </div>
        <!--
    <div class="icon-snacks">
      <nav class="menu">
        <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />

<div class="icon-snack">Sensorik</div>
        <div class="icon-snack">Wearables</div>
        <div class="icon-snack">mHealth</div>
        <div class="icon-snack">eHealth</div>
        <!--
        # href="#" class="menu-item blue"> <i class="fa fa-anchor"></i> </a>
        <a href="#" class="menu-item green"> <i class="fa fa-coffee"></i> </a>
        <a href="#" class="menu-item red"> <i class="fa fa-heart"></i> </a>
        <a href="#" class="menu-item purple"> <i class="fa fa-microphone"></i> </a>
        <a href="#" class="menu-item orange"> <i class="fa fa-star"></i> </a>
        <a href="#" class="menu-item lightblue"> <i class="fa fa-diamond"></i> </a>

</nav>
    </div>

-->
        <a href="#0" class="cd-popup-close img-replace">Close</a>
    </div>
    
</div>

<div class="cd-popup cd-popup-banking" role="alert">
    <div class="cd-popup-container">
        <h2>Banking & Versicherung</h2>
        <p>Der schnelle technologische Fortschritt und das veränderte Kundenverhalten treiben die Digitalisierung der Versicherungs- und Bankenbranche voran und beeinflussen ihre Geschäftsmodelle entlang der gesamten Wertschöpfungskette. Die wachsende Macht
            der Kunden und der Wunsch nach Individualisierung von Produkten, einer einfachen Handhabung sämtlicher Transaktionen sowie einem orts- und zeitunabhängigen Zugang verändern das Angebot von Versicherungen und Banken fundamental.
        </p>
        <div class="md-chips">
            <div class="md-chip">FinTech</div>
            <div class="md-chip">InsurTech</div>
            <div class="md-chip">Business Analytics</div>
            <div class="md-chip">Big Data</div>
            <div class="md-chip">Cloud Computing</div>
            <div class="md-chip">Telematik</div>
        </div>
        <a href="#0" class="cd-popup-close img-replace">Close</a>
    </div>
    
</div>

<div class="cd-popup cd-popup-luftfahrt" role="alert">
    <div class="cd-popup-container">
        <h2>Luftfahrt</h2>
        <p>Für die Zukunftsfähigkeit der deutschen Luftfahrtbranche sind digitale Innovationen von fundamentaler Bedeutung: Dabei gilt es zu hinterfragen, wie beispielsweise mobile Anwendungen, etwa für die nahtlose Verknüpfung von Verkehrsmitteln oder die
            Rückverfolgung von Gepäckstücken, die Customer Journey verändern oder wie Passagierdaten zum Wohle der Reisenden genutzt und dabei optimal geschützt werden können, aber auch, wie sich die Digitalisierung der Produktion (Industrie 4.0) auf
            die Herstellung von Turbinen auswirkt oder der 3D-Druck auf die Ersatzteil-Logistik an Flughäfen. Die Digitalisierung bietet großes Potenzial, um die Luftfahrt in Zukunft noch effizienter, ressourcenschonender und komfortabler zu gestalten.</p>
        <div class="md-chips">
            <div class="md-chip">Smart Airport</div>
            <div class="md-chip">AR / VR</div>
            <div class="md-chip">Cognitive Computing</div>
            <div class="md-chip">Smart Passenger</div>
            <div class="md-chip">In-Flight Entertainment</div>
            <div class="md-chip">Digitale Gepäcklogistik</div>
        </div>
        <a href="#0" class="cd-popup-close img-replace">Close</a>
    </div>
    
</div>

<div class="cd-popup cd-popup-energie" role="alert">
    <div class="cd-popup-container">
        <h2>Energie</h2>
        <p>Die Digitalisierung hat ein Umdenken in der Energie- und Versorgungswirtschaft in Gang gesetzt: Sie beschleunigt den Energiewandel und betrifft alle Ebenen, von der Erzeugung über den Handel und die Verteilung von Energie und Wasser, bis zur Kommunikation
            mit dem Kunden. Die größte Herausforderung hierbei ist es, dezentral erzeugte Energie nach Bedarf der Verbraucher bereitzustellen. Dazu müssen zum einen die Netze ausgebaut und verstärkt werden, zum anderen gilt es, intelligente Technologien
            zu entwickeln und zu integrieren, die alle Netzteilnehmer – also Erzeuger, Versorger, Verbraucher und Netzbetreiber – miteinander kommunizieren und kooperieren lassen.  </p>
        <div class="md-chips">
            <div class="md-chip">Smart Metering</div>
            <div class="md-chip">Smart Grids</div>
            <div class="md-chip">Smart Home & Smart Building</div>
            <div class="md-chip">Dezentrales Energiemanagement</div>
            <div class="md-chip">eMobility</div>
            <div class="md-chip">Predictive Maintenance</div>
        </div>
        <a href="#0" class="cd-popup-close img-replace">Close</a>
    </div>
    
</div>

<div class="cd-popup cd-popup-transport" role="alert">
    <div class="cd-popup-container">
        <h2>Transport</h2>
        <p>Die aufwändige Inventur im Lager, der Gabelstapler-Fahrer, der Paletten bewegt, und der LKW, der die Bestellung zum Händler bringt, könnten schon bald Auslaufmodelle sein. Bereits in zehn Jahren wird sich die Logistik nach Ansicht einer großen
            Mehrheit jener Unternehmen, die heute Logistik einsetzen, völlig verändern. Die Digitalisierung bietet nicht nur die Chance, Geschäftsprozesse zu optimieren und effizienter zu gestalten, sondern kann das Transportwesen und die Logistik grundsätzlich
            revolutionieren.</p>
        <div class="md-chips">
            <div class="md-chip">Autonomes Fahren</div>
            <div class="md-chip">Drohnen</div>
            <div class="md-chip">Smartes Lagermanagement</div>
            <div class="md-chip">Blockchain</div>
            <div class="md-chip">Datenbrillen</div>
            <div class="md-chip">Connected Cars</div>
        </div>
        <a href="#" class="cd-popup-close img-replace highlight-button popup-modal-dismiss no-margin">Schließen</a>
        <button title="Schließen" type="button" class "mfp-close">x</button>
    </div>
    
</div>

<svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1200 850" style="enable-background:new 0 0 1200 850;" xml:space="preserve">
    <g id="Stadt_x5F_HG">
        <path class="st16" d="M1161.0313,507.5313h-5.2998v27.917h-31.9346v-54.9326v-0.0225h-4.6201v-3.8223h-3.2939v-2.8838
		l-6.0625,2.5645h-0.7686v2.8828h-13.8496v3.8447h-4.6201v21.3506l-19.1836-5.8701h-0.5049l-24.1182,7.3809v-1.1338h-1.4902v-1.5
		h1.4902v-1.8223h-1.4902v-1.501h1.4902v-1.8232h-1.4902v-1.5h1.4902v-1.8223h-1.4902v-1.501h1.4902v-1.8223h-1.4902v-1.501h1.4902
		v-1.8232h-1.4902v-1.5h1.4902v-1.8223h-1.4902v-1.501h1.4902v-1.8223h-1.4902v-1.501h1.4902v-1.8223h-1.4902v-1.5h1.4902v-1.8232
		h-1.4902v-1.501h1.4902v-1.8223h-1.4902v-2.6338h-5.8066v-8.4063h-2.292v-8.6084l-2.6357,0.4023v-2.0225h-13.2949v4.0537
		l-2.6357,0.4023v5.7725h-2.292v8.4063h-5.1953v2.6338h-1.9482v1.8223h1.9482v1.501h-1.9482v1.8232h1.9482v1.5h-1.9482v1.8223
		h1.9482v1.501h-1.9482v1.8223h1.9482v1.501h-1.9482v1.8223h1.9482v1.5h-1.9482v1.8232h1.9482v1.501h-1.9482v1.8223h1.9482v1.501
		h-1.9482v1.8223h1.9482v1.5h-1.9482v1.8232h1.9482v1.501h-1.9482v1.8223h1.9482v1.5h-1.7227v-1.2949h-2.6641v8.0459H975.001
		v-27.1377h-6.4316v-16.6846h-0.0986l-10.4746-10.7891h-2.5684v-8.5635h-0.0615l-0.9746-7.9238h-0.0186l-0.9746,7.9238h-0.0615
		v8.5635h-2.5684l-10.4756,10.7891h-0.0986v16.6846h-6.4316v14.4932h-29.7373v-47.4912h-4.7402
		c-0.1797-1.8838-1.9561-3.3691-4.1465-3.3691h-2.3232v-9.1875h-0.9287v9.1875h-2.3232c-2.1904,0-3.9678,1.4854-4.1475,3.3691
		h-4.7393v31.0059l-12.4297,13.7568v21.0811h-21.5713V489.583h-6.9336v-4.7236h0.0898c0.2666,0,0.4824-0.1895,0.4824-0.4238
		s-0.2158-0.4238-0.4824-0.4238h-0.0898h-29.1104h-0.0908c-0.2656,0-0.4814,0.1895-0.4814,0.4238s0.2158,0.4238,0.4814,0.4238
		h0.0908v4.7236h-6.9336v42.5488h-37.3379v-34.4473h-20.5127v-40.7988l-30.2295-20.874v61.6729h-20.5127v-23.7197h-34.5479v-13.2842
		h-4.3184v13.2842h-30.2295v-23.7207h-7.5576v23.7207h-11.875v-34.1582h-35.6279v47.4414h-23.8291v8.7451v10.5244v5.2148h-38.085
		v-42.5488h-6.9346V464.46h0.0908c0.2666,0,0.4824-0.1895,0.4824-0.4238s-0.2158-0.4238-0.4824-0.4238h-0.0908h-4.4229v-7.6348
		h-3.8291l-4.4004-3.4795h-2.2354l-0.6172-11.1826c-0.0039,0-0.0078,0.001-0.0127,0.001c-0.043,0-0.084-0.0039-0.127-0.0049
		l-0.6172,11.1865h-2.2354l-4.3994,3.4795h-3.8301v7.6348h-2.3828h-0.0908c-0.2666,0-0.4824,0.1895-0.4824,0.4238
		s0.2158,0.4238,0.4824,0.4238h0.0908v4.7236h-6.9336v27.6826h-21.5713v-21.0811l-12.4297-13.7568v-31.0059h-4.7402
		c-0.1797-1.8838-1.9561-3.3691-4.1465-3.3691h-2.3232v-9.1875h-0.9287v9.1875h-2.3232c-2.1904,0-3.9668,1.4854-4.1475,3.3691
		h-4.7393v47.4922h-29.7373v-14.4941h-6.4326V447.335h-0.0986l-10.4746-10.7881h-2.5684v-8.5635h-0.0615l-0.9746-7.9238h-0.0186
		l-0.9746,7.9238h-0.0615v8.5635h-2.5684l-10.4746,10.7881h-0.0986v16.6855h-6.4316v27.1387h-31.7461v-8.0469h-2.6631v1.2959
		h-1.7227v-1.501h1.9482v-1.8232h-1.9482v-1.5h1.9482v-1.8223h-1.9482v-1.501h1.9482v-1.8223h-1.9482v-1.501h1.9482v-1.8232h-1.9482
		v-1.5h1.9482v-1.8232h-1.9482v-1.5h1.9482v-1.8223h-1.9482v-1.501h1.9482v-1.8223h-1.9482v-1.5h1.9482v-1.8232h-1.9482v-1.501
		h1.9482v-1.8223h-1.9482v-1.5h1.9482v-1.8232h-1.9482v-2.6338h-5.1953v-8.4063h-2.293v-5.7725l-2.6357-0.4023v-4.0537h-13.2939
		v2.0225l-2.6367-0.4023v8.6084h-2.292v8.4063h-5.8057v2.6338h-1.4902v1.8232h1.4902v1.5h-1.4902v1.8223h1.4902v1.501h-1.4902
		v1.8232h1.4902v1.5h-1.4902v1.8223h1.4902v1.501h-1.4902v1.8223h1.4902v1.5h-1.4902v1.8232h1.4902v1.5h-1.4902v1.8232h1.4902v1.501
		h-1.4902v1.8223h1.4902v1.501h-1.4902v1.8223h1.4902v1.5h-1.4902v1.8232h1.4902v1.501h-1.4902v1.1328l-24.1182-7.3809h-0.5049
		l-19.1836,5.8701v-21.3496h-4.6201v-3.8457h-13.8506v-2.8828h-0.7676h-6.0625v2.8828h-3.2939v3.8223h-4.6211v0.0234v54.9316
		H157.002v-27.917h-5.2998v-5.0996H104.126v-8.5605h-1.9971v8.5605h-1.9971v-13.1143h-1.998v13.1143H94.043v5.0996h-5.2988v12.248
		H73.0459v-28.4482h-6.708v20.1494h-0.0537v-25.8252H59.752v-4.9531h0.0674c0.2793,0,0.5059-0.1992,0.5059-0.4443
		c0-0.2461-0.2266-0.4453-0.5059-0.4453H59.752l-11.6895-9.3906v-5.2031h-2.2354l-0.6182-11.7266c-0.0039,0-0.0078,0-0.0117,0
		c-0.0439,0-0.084-0.0039-0.127-0.0049l-0.6182,11.7314h-2.2344v5.2031h0.1143l-11.6895,9.3906h-0.0674
		c-0.2793,0-0.5059,0.1992-0.5059,0.4453c0,0.2451,0.2266,0.4443,0.5059,0.4443h0.0674v4.9531h-7.335v5.6758h-6.708v39.8154H0
		v272.3682h1199.958V502.4316h-38.9268V507.5313z M303.3232,491.0547h-1.7227v-1.501h1.7227V491.0547z M303.3232,487.7305h-1.7227
		v-1.5h1.7227V487.7305z" />
        <rect y="722.2324" class="st33" width="1199.958" height="25.2383" />
        <g>

svg city travel map with popup window and interactive animation

svg, city, map

编辑器支持Emmet

快捷键

svg city travel map with popup window and interactive animation

svg, city, map

6个带简单交互动画的SVG图标

SVG+CSS3制作油画风格的交互式街道夜景和店铺商标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：