Carte interactive coupé

Max37300
Javascript

Bonjour,
J'ai récemment utilisé le tuto permettant de réaliser une carte interactive en Javascript pour un site internet. Tout marche super bien, seul problème, le haut de mon plan est coupé... J'ai beau redimensionner mon image dans la viewbox, changer les dimensions de la classe, rien y fais... Vous pouvez voir mon probleme en allant sur ce lien ( https://niveau0-cmct.000webhostapp.com/ ), on vois très bien que l'ascenseur n'apparait pas et que les formes supérieurs sont réduites par rapport au reste... Je ne sais pas comment réglé ce problème ...
Si quelqu'un peux me venir en aide ce serai avec un énorme plaisir..
Cordialement

Voici mon code html :

<!DOCTYPE html>
        <html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui"/>
    <link rel="stylesheet" href="app.css">
</head>
<body>
<div class="map" id="map">
    <div class="map__image">

        <svg width="320,264px" height="310,26px" version="1.1" viewBox="0 0 320.26 310.26" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
            <a id="region-A" xlink:title="Dentiste" xlink:href="">
                <path d="m320 87v-110h-80v40h-30v70z"/>
            </a>
            <a id="region-B" xlink:title="Kinésithérapie" xlink:href="">
                <path d="m6.4e-6 -23h50v80h-50z"/>
            </a>
            <a id="region-C" xlink:title="Ophtalmologie" xlink:href="">
                <path d="m320 227v-140h-140v140z"/>
            </a>
            <a id="region-D" xlink:title="Orthopédie 1" xlink:href="">
                <path d="m6.4e-6 87h60v60h40v80h-100z"/>
            </a>
            <a id="region-E" xlink:title="Orthopédie 2" xlink:href="">
                <path d="m50-23h40v80h-40z"/>
            </a>
            <a id="region-F" xlink:title="Radiologie" xlink:href="">
                <path d="m60 87h40v60h-40z"/>
            </a>
            <a id="region-G" xlink:title="Rhumatologie" xlink:href="">
                <path d="m90-23h30v80h-30z"/>
            </a>
            <a id="region-H" xlink:title="Ascenseur" xlink:href="">
                <path d="m210-23h20v20h-20v-20"/>
            </a>
            <a id="region-I" xlink:title="Escalier 1" xlink:href="">
                <path d="m40 67h40v20h-40z"/>
            </a>
            <a id="region-J" xlink:title="Escalier 2" xlink:href="">
                <path d="m150-3h20v40h-20z"/>
            </a>
            <a id="region-K" xlink:title="Escalier Sous-Terrain" xlink:href="">
                <path d="m6.4e-6 67h40v20h-40z"/>
            </a>
            <a id="region-L" xlink:title="SODEXO" xlink:href="">
                <path d="m120 17h30v40h-30z"/>
            </a>
            <a id="region-M" xlink:title="Local poubelle" xlink:href="">
                <path d="m120-23h30v40h-30z"/>
            </a>
        </svg>
    </div>
    <div class="map__list">
       <ul>
           <a href="">Niveau 0 (Vous êtes ici)</a>
           <a href="">Niveau 1</a>
           <a href="">Niveau 2</a>
           <hr>
           <li><a href="" id="list-A">Dentiste</a></li>
           <li><a href="" id="list-B">Kinésithérapie</a></li>
           <li><a href="" id="list-C">Ophtalmologie</a></li>
           <li><a href="" id="list-D">Orthopédie 1</a></li>
           <li><a href="" id="list-E">Orthopédie 2</a></li>
           <li><a href="" id="list-F">Radiologie</a></li>
           <li><a href="" id="list-G">Rhumatologie</a></li>
           <hr>
           <li><a href="" id="list-H">Ascenseur</a></li>
           <li><a href="" id="list-I">Escalier 1</a></li>
           <li><a href="" id="list-J">Escalier 2</a></li>
           <li><a href="" id="list-K">Escalier sous-terrain</a></li>
           <li><a href="" id="list-L">SODEXO</a></li>
           <li><a href="" id="list-M">Local poubelle</a></li>
       </ul>
    </div>
</div>
<script src="polyfill.js"></script>
<script src="app.js"></script>
</body>
</html>

Voici mon code css :

body {

    font-family: Comfortaa;
    background-color: #F5F5F5;
    color: #004099;
}

* {
    box-sizing: border-box;
}

.map {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    max-width: 900px;
    margin: 20px auto;
}

.map__image {
    position: absolute;
    top: 20px;
    left: 0;
    right:280px;
    bottom: 0;
}

.map__image svg {
    width: 100%;
    height: 350px;
}

.map__image path {
    fill: #004099;
    stroke: #FFFFFF;
    stroke-width: 1px;
    transition: fill 0.3s;
}

.map__image .is-active path {
    fill: #840c20;
}

/* Liste
   ========================================================================== */
.map__list {
    float: right;
    width: 280px;
    border-left: 1px solid #dbdbdb;
}

.map__list hr{
    border: 1px solid #dbdbdb;
}

.map__list a:hover{
    color: #FFFFFF;
    background-color: #004099;
}

.map__list ul, .map__list li{
    margin: 0;
    padding: 0;
    list-style: none;
}

.map__list a {
    padding-left: 10px;
    display: inline-block;
    height: 30px;
    width: 100%;
    line-height: 30px;
    color: inherit;
    text-decoration: none;
    transition: 0.3s;
}

.map__list a.is-active {
    color: #FFFFFF;
    background-color: #004099;
}

@media screen and (max-width: 720px){
    .map__list {
        float: none;
        width: 100%;
        border-left: 1px solid #dbdbdb;
    }
    .map__image{
        padding: 10px;
        position: static;
        width: 100%;
    }
}

Aucune réponse