Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
鼠标悬停位置上的svg工具提示_Svg - Fatal编程技术网

鼠标悬停位置上的svg工具提示

鼠标悬停位置上的svg工具提示,svg,Svg,我正在使用svg,悬停时必须显示工具提示,但问题是工具提示显示的位置离所需位置很远 svg是一个地图,因此工具提示的位置必须精确。第一个意图是svg本身就是问题所在,但在与另一个完美工作的svg进行检查后,我没有找到问题的根源 实际结果是: 想要的一个: 黄色部分是地图中悬停发生的位置 svg代码的一部分: <svg id="Layer_0" data-name="Layer 0" xmlns="http://www.w3.org/

我正在使用svg,悬停时必须显示工具提示,但问题是工具提示显示的位置离所需位置很远

svg是一个地图,因此工具提示的位置必须精确。第一个意图是svg本身就是问题所在,但在与另一个完美工作的svg进行检查后,我没有找到问题的根源

实际结果是:

想要的一个:

黄色部分是地图中悬停发生的位置

svg代码的一部分:

 <svg id="Layer_0" data-name="Layer 0"  xmlns="http://www.w3.org/2000/svg" width="529.017" height="491.509" viewBox="0 0 529.017 491.509">      
                    <defs>
                    <style>
    .cls-5898b1  {
        fill: #5898b1 ;
    }
    .cls-f9f9f9  {
        fill: #f9f9f9 ;
    }
    .cls-061d53  {
        fill: #061d53 ;
    }
    .cls-5898b1, .cls-f9f9f9, .cls-061d53, .cls-IDF {
        stroke: #061d53;
        stroke-width: 0.5px;
    }
    .cls-f9f9f9-nostroke {
        fill: #f9f9f9;
    }
    .cls-IDF {
        fill: #bee0e0;
    }
    
    /*         .mapImage, .mapImageMobile { */
    /*     float: left; */
    /*     width: 100%; */
    /* } */
    .mapImage path, .mapImageMobile path {
        stroke-width: 1px;
    }
    
    .mapImage  polygon, .mapImageMobile polygon {
        stroke-width: 1px;
    }
    
    .mapImage path:hover, .mapImage polygon:hover, .mapImageMobile path:hover,
        .mapImageMobile polygon:hover {
        fill: #ffcb00;
    }
    
    .cls-1, .cls-4 {
        stroke: #C4C4C4;
    }
    
    .st0 {
        fill: #000000;
    }
    
    .cls-1, .cls-3, .cls-2 {
        fill: transparent;
    }
    
     <g id="Groupe_1355" data-name="Groupe 1355" transform="translate(-129.507 -2290.08)">
        <g id="Groupe_1190" data-name="Groupe 1190" transform="translate(-35.507 2042.682)">
    
            <a id="centre" style="stroke:#061D53;">
                    
          <path id="FR-F" class="cls-f9f9f9-nostroke" data-name="Tracé 1042" d="M2822.574,2031.032a.545.545,0,0,1-.094-.146,10,10,0,0,1,0-3.668c.084-.661.556-1.926.667-2.583.064-.382-.071-1.209.125-1.542.248-.421,1.289-.729,1.625-1.083a7.25,7.25,0,0,0,1.292-2.167,19.775,19.775,0,0,0,.083-2.125,20.276,20.276,0,0,1,.75-3c.172-.478.755-1.34.875-1.834.161-.668-.172-2.111.083-2.75a3.738,3.738,0,0,1,1.375-1.542,3.789,3.789,0,0,1,1.709,0c.388.08,1.067.562,1.458.625a1.778,1.778,0,0,0,1-.083c.406-.3.38-1.531.75-1.875a4.486,4.486,0,0,1,1.834-.583,12.812,12.812,0,0,0,1.292,0c.418-.125,1.04-.834,1.458-.958.469-.14,1.515.206,1.959,0a2.524,2.524,0,0,0,.917-1.084c.147-.4-.118-1.3,0-1.708a3.525,3.525,0,0,1,.959-1.542c.441-.287,1.609-.064,2.084-.292a4.236,4.236,0,0,0,1.375-1.292c.323-.575.277-1.98.542-2.584.18-.41.952-1.019,1.042-1.458.107-.523-.7-1.609-.459-2.084s1.631-.473,2-.875a4.753,4.753,0,0,0,.75-2.208c.024-.371-.3-1.087-.292-1.458.019-.614.86-1.808.625-2.376-.166-.4-1.393-.454-1.5-.875s.6-1.135.875-1.459c.212-.248.875-.533,1-.833.141-.338-.328-1.154-.125-1.459s1.171-.178,1.417-.458a1.528,1.528,0,0,0,.208-1.125,1.348,1.348,0,0,0-.667-.5c-.238-.079-.775.108-1,0a2.837,2.837,0,0,1-.853-.986c-.059-.1-.109-.189-.147-.264a4.525,4.525,0,0,1-.5-1.833c.038-.362.614-.933.667-1.292a3.093,3.093,0,0,0-.292-1.542c-.137-.221-.663-.429-.833-.625-.281-.323-.875-1.074-.833-1.5a2.776,2.776,0,0,1,1.333-1.584c.5-.206,1.633.313,2.167.208a4.927,4.927,0,0,0,1.667-.875,7.99,7.99,0,0,0,1.208-1.667,10.572,10.572,0,0,0,1.083-2.625,5.313,5.313,0,0,0-.25-2.5c-.141-.254-.753-.469-.917-.708a12.664,12.664,0,0,1-.583-2,5.6,5.6,0,0,0-.958-1.917c-.219-.172-.842-.113-1.083-.25a4.216,4.216,0,0,1-1.25-1.292,4.653,4.653,0,0,1-.375-2.084,3.471,3.471,0,0,1,.367-.953,4.334,4.334,0,0,1,.592-.881,5.386,5.386,0,0,1,1.709-1c.657-.211,2.113.016,2.75-.25.553-.23,1.324-1.227,1.834-1.542a7.255,7.255,0,0,1,1.542-.667,16.14,16.14,0,0,1,1.667-.125c.732-.074,2.221-.613,2.917-.375.321.109.633.867.958.958a2.907,2.907,0,0,0,1.375-.333,7.579,7.579,0,0,0,2.125-1.375,6.794,6.794,0,0,0,.625-1.375,6.764,6.764,0,0,1,.75-1.792c.329-.314,1.339-.359,1.709-.625a2.534,2.534,0,0,0,.833-1.042c.079-.368-.428-1.086-.375-1.458a2.924,2.924,0,0,1,.667-1.125,7.51,7.51,0,0,1,1.258-.661,5.364,5.364,0,0,1,.77,1.23c.089.322-.11,1.019,0,1.333.177.5,1.107,1.185,1.334,1.667a4.512,4.512,0,0,1,.279,1.334,16.093,16.093,0,0,0-.279,1.834,8.07,8.07,0,0,0,.667,1.167,7.467,7.467,0,0,1,.667,2.112c.007.594-.847,1.713-.667,2.278.1.32.862.559,1.056.833.272.383.315,1.413.611,1.778.153.189.643.351.833.5a5.356,5.356,0,0,1,1.223,1.223c.2.4.027,1.405.278,1.778.271.4,1.27.72,1.667,1,.25.177.836.492.945.779.18.472-.364,1.5-.306,2a3.339,3.339,0,0,0,.583,1.444,3.058,3.058,0,0,0,1.195.556c.278.061.873-.1,1.139,0,.376.145.836.9,1.2,1.083.31.157,1.094.057,1.362.278a5.025,5.025,0,0,1,.944,2.278c.094.47-.179,1.473,0,1.917.153.381.985.8,1.139,1.181a3.008,3.008,0,0,1,0,1.32c-.057.255-.444.684-.445.945a1.046,1.046,0,0,0,.306.653c.3.194,1.063.066,1.417.042a2.332,2.332,0,0,0,1-.167c.175-.141.149-.705.334-.833.282-.2,1.031-.037,1.375-.042a4.759,4.759,0,0,0,1.25,0,1.625,1.625,0,0,0,.667-.625c.1-.229-.153-.8,0-1a1.527,1.527,0,0,1,1.125-.292c.414.086,1.013.766,1.333,1.042.262.227.654.938,1,.958.416.025,1.09-.662,1.333-1,.116-.16.09-.634.25-.75a1.446,1.446,0,0,1,1.125,0c.284.162.383.964.667,1.125.417.237,1.516-.263,1.917,0,.371.242.617,1.191.708,1.625.085.407-.25,1.333,0,1.667s1.285.173,1.584.458a4.559,4.559,0,0,1,.708,2.084,3.276,3.276,0,0,1-.083,1.458c-.172.329-1,.583-1.167.917a1.689,1.689,0,0,0,0,1.167,1.655,1.655,0,0,0,1,.542c.35.018.968-.409,1.292-.542a7.726,7.726,0,0,1,1.458-.583,7.4,7.4,0,0,1,1.931.292,9.191,9.191,0,0,0,1.584.556,4.1,4.1,0,0,0,1.889-.695c.236-.194.39-.864.639-1.042a2.652,2.652,0,0,1,1.167-.263,3.458,3.458,0,0,1,1.167.263c.279.142.634.781.944.82a2.181,2.181,0,0,0,1.223-.612c.21-.2.3-.879.556-1.028.193-.115.682.033,1.06.1a1.526,1.526,0,0,0,.176.564,2.168,2.168,0,0,0,.916.583c.24.07.759-.063,1,0a2.084,2.084,0,0,1,1.042.583c.218.392-.189,1.356-.083,1.792a4.048,4.048,0,0,0,.917,1.584,9.343,9.343,0,0,0,1.375.542c.224.12.716.357.834.583a4.751,4.751,0,0,1,0,2.334,5.606,5.606,0,0,1-.792,1.833c-.208.255-.915.468-1.084.75-.188.315.061,1.17-.167,1.459-.322.408-1.659.282-1.958.708a2.309,2.309,0,0,0,0,1.458c.087.288.6.707.667,1a4.265,4.265,0,0,1-.25,1.625,4.537,4.537,0,0,1-.583,1.167c-.133.16-.541.334-.667.5-.175.231-.2.893-.417,1.083a2.6,2.6,0,0,1-1.459.333c-.2-.02-.545-.32-.75-.333a2.863,2.863,0,0,0-1.542.458,2.456,2.456,0,0,0-.625,1.417,3.426,3.426,0,0,0,.917,1.667c.344.321,1.411.427,1.709.792a5.322,5.322,0,0,1,.5,2.125c.049.424-.169,1.316,0,1.708.113.264.7.538.833.792a2.246,2.246,0,0,1,.209,1.25,2.986,2.986,0,0,1-1.083,1.125c-.26.156-.964.108-1.167.333a1.617,1.617,0,0,0-.208,1.167c.1.279.755.522.875.792.182.409-.132,1.363,0,1.792.1.337.692.828.792,1.167a4.344,4.344,0,0,1-.042,1.667,6.105,6.105,0,0,1-.75,1.542c-.179.252-.757.589-.875.875a3.652,3.652,0,0,0,0,1.625,4.967,4.967,0,0,0,.875,1.875c.3.3,1.22.432,1.542.709a4.581,4.581,0,0,1,.875,1.333c.265.648.18,2.15.542,2.75.18.3.917.569,1.084.875a5.666,5.666,0,0,1,.25,2.292c-.028.48-.412,1.395-.431,1.875a4.436,4.436,0,0,0,.278,1.861c.245.4,1.218.755,1.528,1.112a4.5,4.5,0,0,1,.861,1.611,8.536,8.536,0,0,1-.444,2.695c-.126.454-.618,1.286-.694,1.75a6.316,6.316,0,0,0,.083,1.7c.084.427.589,1.2.583,1.639a6.057,6.057,0,0,1-.7,1.806,9.875,9.875,0,0,0-.944,1.612,2.345,2.345,0,0,0,.043.756c-.3-.048-.6-.121-.766-.145-.43-.063-1.244-.607-1.667-.5-.3.077-.629.711-.889.889-.426.292-1.539.454-1.889.833-.229.25-.243,1.006-.444,1.279a2.911,2.911,0,0,1-1.056.777c-.554.182-2-.481-2.334,0-.152.222.54.779.389,1s-.792,0-1.055,0a7.7,7.7,0,0,0-1.557,0c-.36.1-.917.677-1.277.778-.307.087-1.079-.25-1.278,0s.278,1.223,0,1.333a4.9,4.9,0,0,0-1.445.612,1.693,1.693,0,0,0-.333,1c.02.148.32.35.333.5.02.21-.349.567-.333.778.021.292.5.73.612,1,.177.422.726,1.417.444,1.778-.086.11-.43-.059-.556,0-.339.162-.616.986-.944,1.167a5.688,5.688,0,0,1-2.834.333c-.373-.071-.954-.729-1.334-.722-.355.007-.924.531-1.223.722-.227.145-.662.465-.888.612-.724.466-2.522,1.029-2.946,1.778-.177.314.182,1.133,0,1.444-.194.33-1.075.453-1.358.744a4.049,4.049,0,0,0-1.753.062c-.307.12-.469.912-.75,1.084a6.319,6.319,0,0,1-3.834.5c-.273-.089-.567-.685-.833-.792-.62-.248-2.011.12-2.667,0-.548-.1-1.535-.691-2.083-.792a6.887,6.887,0,0,0-2,0c-.469.1-1.276.874-1.75.792s-.959-1.189-1.417-1.375c-.328-.133-1.2-.278-1.417,0-.346.435.566,1.615.5,2.167-.033.278-.223.967-.5,1-.407.049-.668-1.142-1.064-1.25a2.39,2.39,0,0,0-1.853.639c-.149.209.182.846,0,1.028a1.85,1.85,0,0,1-1.834,0c-.316-.317.268-1.433,0-1.792-.195-.262-.927-.328-1.25-.375a5.1,5.1,0,0,0-1.917,0,3.008,3.008,0,0,0-1.25,1.139c-.1.235.133.808,0,1.028-.28.462-1.421.784-1.917,1-.344.15-1.079.663-1.417.5-.4-.191-.3-1.329-.583-1.667a2.894,2.894,0,0,0-1.584-.875,1.829,1.829,0,0,0-.917.542c-.2.222-.252.918-.5,1.083a3.261,3.261,0,0,1-2.084.083,4.657,4.657,0,0,1-1.028-.833c-.149-.128-.45-.3-.678-.489a.745.745,0,0,1-.294-.387c-.078-.485.989-1.218.973-1.709a1.705,1.705,0,0,0-.556-.833c-.348-.3-1.469-.338-1.667-.75-.252-.524.6-1.669.583-2.25a2.908,2.908,0,0,0-.583-1.75c-.338-.243-1.256-.068-1.667,0-.51.084-1.479.86-1.959.667-.674-.271-.809-2.08-1.333-2.583-.464-.445-1.854-.656-2.334-1.084a5.866,5.866,0,0,1-1.584-2.584c-.067-.529.546-1.514.625-2.042a6.676,6.676,0,0,0,0-2.129,7.393,7.393,0,0,0-1.292-2.038c-.411-.464-1.6-1.04-1.917-1.57-.395-.649-.208-2.339-.625-2.973-.358-.543-1.72-.991-2.125-1.5a9.785,9.785,0,0,1-.75-1.833c-.306-.732-.675-2.371-1.25-2.917-.282-.269-1.134-.326-1.458-.542-.405-.269-.87-1.272-1.333-1.417a1.485,1.485,0,0,0-1.167.25c-.3.365.164,1.437,0,1.876a1.525,1.525,0,0,1-.542.625c-.442.213-1.529-.151-1.959.083-.269.147-.436.859-.708,1a2.222,2.222,0,0,1-.958,0c-.649-.078-1.888-.635-2.542-.625-.313,0-.912.435-1.209.333a3.476,3.476,0,0,1-1.458-1.959c-.112-.486.372-1.46.375-1.959a4.754,4.754,0,0,0-.375-2.083,2.5,2.5,0,0,0-1.209-.708c-.3-.055-.933.344-1.208.208-.4-.2-.5-1.29-.833-1.583-.368-.321-1.459-.355-1.833-.667-.521-.433-.969-1.792-1.375-2.334C2823,2031.41,2822.728,2031.213,2822.574,2031.032Z" transform="translate(-2481.446 -1580.518)">
          <title transform="translate(-2481.446 -1580.518)">Centre Val de Loire</title>
          </path>
          </a>

.cls-5898b1{
填充物:#5898b1;
}
.cls-f9f9f9{
填充:#f9f9f9;
}
.cls-061d53{
填充:#061d53;
}
.cls-5898b1、.cls-f9f9f9、.cls-061d53、.cls-IDF{
行程:#061d53;
笔划宽度:0.5px;
}
.cls-f9f9f9-nostroke{
填充:#f9f9f9;
}
.cls IDF{
填充:#bee0e0;
}
/*.mapImage、.mapImageMobile{*/
/*浮动:左*/
/*宽度:100%*/
/* } */
.mapImage路径、.mapImageMobile路径{
笔画宽度:1px;
}
.mapImage多边形、.mapImageMobile多边形{
笔画宽度:1px;
}
.mapImage路径:悬停,.mapImage多边形:悬停,.mapImageMobile路径:悬停,
.mapImageMobile多边形:悬停{
填充:#ffcb00;
}
.cls-1、.cls-4{
行程:#C4C4;
}
.st0{
填写:#000000;
}
.cls-1、.cls-3、.cls-2{
填充:透明;
}
卢瓦尔中心酒店
这个bug似乎只出现在大型桌面上,而在中型桌面上,工具提示工作得非常完美

  • 您需要添加结束标记
  • 标记从
    路径
    中移动到
    链接标记中
  • transform=“translate(-2481.446-1580.518)
  • 
    .cls-5898b1{
    填充物:#5898b1;
    }
    .cls-f9f9f9{
    填充:#f9f9f9;
    }
    .cls-061d53{
    填充:#061d53;
    }
    .cls-5898b1、.cls-f9f9f9、.cls-061d53、.cls-IDF{
    行程:#061d53;
    笔划宽度:0.5px;
    }
    .cls-f9f9f9-nostroke{
    填充:#f9f9f9;
    }
    .cls IDF{
    填充:#bee0e0;
    }
    /*.mapImage、.mapImageMobile{*/
    /*浮动:左*/
    /*宽度:100%*/
    /* } */
    .mapImage路径、.mapImageMobile路径{
    笔画宽度:1px;
    }
    .mapImage多边形、.mapImageMobile多边形{
    笔画宽度:1px;
    }
    .mapImage路径:悬停,.mapImage多边形:悬停,.mapImageMobile路径:悬停,
    .mapImageMobile多边形:悬停,路径:悬停{
    填充:#ffcb00;
    }
    .cls-1、.cls-4{
    行程:#C4C4;
    }
    .st0{
    填写:#000000;
    }
    .cls-1、.cls-3、.cls-2{
    填充:透明;
    }
    卢瓦尔中心酒店
    
    正如我在中所评论的,您需要添加您正在处理的代码或其简化版本。这是svg Grand Est实际核心的一部分。您应该编辑问题并添加它。将其包含在svg元素中也很好。您是使用viewBox属性还是仅使用宽度和高度?以及您的ooltip是一个html元素,或者是svg的一部分?实际上,我在宽度和高度旁边使用了一个viewbox属性,工具提示是svgI的一部分。对此,我很抱歉,我没有做任何更改。编辑是无意的。我打开了您的代码以便更好地理解它。thks作为您的答案,但这只是代码Auvergne Rhône Al的一部分聚醚砜