Closed. This question is off-topic。它当前不接受答案。
想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
2年前关闭。
我想将每个城市的描述都放在地图的底部。通过哪个城市可以在同一位置看到详细信息，并且我必须为每个城市添加许多信息，这就是为什么要将描述框放在地图底部的原因。有什么办法可以完成此任务。我已经尝试了很多方法，但是它不在页面底部。
另外：这是笔的叉子：https://codepen.io/enxaneta/pen/87dc4facb04e657fea5c9a5eb7b2ea3c/
想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
2年前关闭。
我想将每个城市的描述都放在地图的底部。通过哪个城市可以在同一位置看到详细信息，并且我必须为每个城市添加许多信息，这就是为什么要将描述框放在地图底部的原因。有什么办法可以完成此任务。我已经尝试了很多方法，但是它不在页面底部。
最佳答案
为了清楚起见，我减少了很多代码。我所做的就是删除您的代码中被注释掉的部分。另外，请不要使用width="959px" height="593px" viewBox="none"使用viewBox="0 0 959 593"，这会使您的SVG与“容器”（在这种情况下为body）一样大。
$description = $(".description");
$('.enabled').hover(function() {
$(this).attr("class", "enabled heyo");
$description.addClass('active');
$description.html($(this).attr('id'));
}, function() {
$description.removeClass('active');
});
/*
$(document).on('mousemove', function(e){
$description.css({
left: e.pageX,
top: e.pageY - 70
});
});*/html, body {
width: 100%;
}
svg {
/*max-width: 100% !important;*/
width:100vh;
/*height: auto;*/
display: block;
border:1px solid;
}
.heyo:hover {
fill: #CC2929;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.enabled {
fill: #21669E;
cursor: pointer;
}
.description {
/*pointer-events: none;
position: absolute;*/
font-size: 18px;
text-align: center;
background: white;
padding: 10px 15px;
z-index: 5;
height: 30px;
line-height: 30px;
margin: 0 auto;
color: #21669e;
border-radius: 5px;
box-shadow: 0 0 0 1px #eee;
/*-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);*/
display: none;
}
.description.active {
display: block;
}
.description:after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 0;
height: 0;
margin-left: -10px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" viewBox="0 400 959 193" preserveAspectRatio="xMidYMid meet" xml:space="preserve" >
<path id="Alaska" class="enabled" fill="#21669E" stroke="#FFFFFF" stroke-width="0.75" d="M158.1,453.7l-0.3,85.4l1.6,1l3.1,0.2l1.5-1.1h2.6l0.2,2.9
l7,6.8l0.5,2.6l3.4-1.9l0.6-0.2l0.3-3.1l1.5-1.6l1.1-0.2l1.9-1.5l3.1,2.1l0.6,2.9l1.9,1.1l1.1,2.4l3.9,1.8l3.4,6l2.7,3.9l2.3,2.7
l1.5,3.7l5,1.8l5.2,2.1l1,4.4l0.5,3.1l-1,3.4l-1.8,2.3l-1.6-0.8l-1.5-3.1l-2.7-1.5l-1.8-1.1l-0.8,0.8l1.5,2.7l0.2,3.7l-1.1,0.5
l-1.9-1.9l-2.1-1.3l0.5,1.6l1.3,1.8l-0.8,0.8c0,0-0.8-0.3-1.3-1c-0.5-0.6-2.1-3.4-2.1-3.4l-1-2.3c0,0-0.3,1.3-1,1
c-0.6-0.3-1.3-1.5-1.3-1.5l1.8-1.9l-1.5-1.5v-5h-0.8l-0.8,3.4l-1.1,0.5l-1-3.7l-0.6-3.7l-0.8-0.5l0.3,5.7v1.1l-1.5-1.3l-3.6-6
l-2.1-0.5l-0.6-3.7l-1.6-2.9l-1.6-1.1v-2.3l2.1-1.3l-0.5-0.3l-2.6,0.6l-3.4-2.4l-2.6-2.9l-4.8-2.6l-4-2.6l1.3-3.2v-1.6l-1.8,1.6
l-2.9,1.1l-3.7-1.1l-5.7-2.4h-5.5l-0.6,0.5l-6.5-3.9l-2.1-0.3l-2.7-5.8l-3.6,0.3l-3.6,1.5l0.5,4.5l1.1-2.9l1,0.3l-1.5,4.4l3.2-2.7
l0.6,1.6l-3.9,4.4l-1.3-0.3l-0.5-1.9l-1.3-0.8l-1.3,1.1l-2.7-1.8l-3.1,2.1l-1.8,2.1l-3.4,2.1l-4.7-0.2l-0.5-2.1l3.7-0.6v-1.3
l-2.3-0.6l1-2.4l2.3-3.9v-1.8l0.2-0.8l4.4-2.3l1,1.3h2.7l-1.3-2.6l-3.7-0.3l-5,2.7l-2.4,3.4l-1.8,2.6l-1.1,2.3l-4.2,1.5l-3.1,2.6
l-0.3,1.6l2.3,1l0.8,2.1l-2.7,3.2l-6.5,4.2l-7.8,4.2l-2.1,1.1l-5.3,1.1l-5.3,2.3l1.8,1.3l-1.5,1.5l-0.5,1.1l-2.7-1l-3.2,0.2
l-0.8,2.3h-1l0.3-2.4l-3.6,1.3l-2.9,1l-3.4-1.3l-2.9,1.9h-3.2l-2.1,1.3l-1.6,0.8l-2.1-0.3l-2.6-1.1l-2.3,0.6l-1,1l-1.6-1.1v-1.9
l3.1-1.3l6.3,0.6l4.4-1.6l2.1-2.1l2.9-0.6l1.8-0.8l2.7,0.2l1.6,1.3l1-0.3l2.3-2.7l3.1-1l3.4-0.6l1.3-0.3l0.6,0.5h0.8l1.3-3.7l4-1.5
l1.9-3.7l2.3-4.5l1.6-1.5l0.3-2.6l-1.6,1.3l-3.4,0.6l-0.6-2.4l-1.3-0.3l-1,1l-0.2,2.9l-1.5-0.2l-1.5-5.8l-1.3,1.3l-1.1-0.5l-0.3-1.9
l-4,0.2l-2.1,1.1l-2.6-0.3l1.5-1.5l0.5-2.6l-0.6-1.9l1.5-1l1.3-0.2l-0.6-1.8v-4.4l-1-1l-0.8,1.5h-6.1l-1.5-1.3l-0.6-3.9l-2.1-3.6v-1
l2.1-0.8L53,514l1.1-1.1l-0.8-0.5l-1.3,0.5l-1.1-2.7l1-5l4.5-3.2l2.6-1.6l1.9-3.7l2.7-1.3l2.6,1.1l0.3,2.4l2.4-0.3l3.2-2.4l1.6,0.6
l1,0.6h1.6l2.3-1.3l0.8-4.4c0,0,0.3-2.9,1-3.4c0.6-0.5,1-1,1-1l-1.1-1.9l-2.6,0.8l-3.2,0.8l-1.9-0.5l-3.6-1.8l-5-0.2l-3.6-3.7
l0.5-3.9l0.6-2.4l-2.1-1.8l-1.9-3.7l0.5-0.8l6.8-0.5h2.1l1,1h0.6l-0.2-1.6l3.9-0.6l2.6,0.3l1.5,1.1l-1.5,2.1l-0.5,1.5l2.7,1.6l5,1.8
l1.8-1l-2.3-4.4l-1-3.2l1-0.8l-3.4-1.9l-0.5-1.1l0.5-1.6l-0.8-3.9l-2.9-4.7l-2.4-4.2l2.9-1.9h3.2l1.8,0.6l4.2-0.2l3.7-3.6l1.1-3.1
l3.7-2.4l1.6,1l2.7-0.6l3.7-2.1l1.1-0.2l1,0.8l4.5-0.2l2.7-3.1h1.1l3.6,2.4l1.9,2.1l-0.5,1.1l0.6,1.1l1.6-1.6l3.9,0.3l0.3,3.7
l1.9,1.5l7.1,0.6l6.3,4.2l1.5-1l5.2,2.6l2.1-0.6l1.9-0.8l4.8,1.9L158.1,453.7L158.1,453.7z M43,482.6l2.1,5.3l-0.2,1l-2.9-0.3
l-1.8-4l-1.8-1.5H36l-0.2-2.6l1.8-2.4l1.1,2.4l1.5,1.5L43,482.6z M40.4,516.1l3.7,0.8l3.7,1l0.8,1l-1.6,3.7l-3.1-0.2l-3.4-3.6
L40.4,516.1z M19.7,502l1.1,2.6l1.1,1.6l-1.1,0.8l-2.1-3.1V502H19.7L19.7,502z M6,575.1l3.4-2.3l3.4-1l2.6,0.3l0.5,1.6l1.9,0.5
l1.9-1.9l-0.3-1.6l2.7-0.6l2.9,2.6l-1.1,1.8l-4.4,1.1l-2.7-0.5l-3.7-1.1l-4.4,1.5l-1.6,0.3L6,575.1L6,575.1z M54.9,570.6l1.6,1.9
l2.1-1.6l-1.5-1.3L54.9,570.6z M57.8,573.6l1.1-2.3l2.1,0.3l-0.8,1.9H57.8z M81.4,571.7l1.5,1.8l1-1.1l-0.8-1.9L81.4,571.7z
M90.2,559.2l1.1,5.8l2.9,0.8l5-2.9l4.4-2.6l-1.6-2.4l0.5-2.4l-2.1,1.3l-2.9-0.8l1.6-1.1l1.9,0.8l3.9-1.8l0.5-1.5l-2.4-0.8l0.8-1.9
l-2.7,1.9l-4.7,3.6l-4.9,2.9L90.2,559.2L90.2,559.2z M132.5,539.4l2.4-1.5l-1-1.8l-1.8,1L132.5,539.4z"/>
</svg>
<div class="description"></div>另外：这是笔的叉子：https://codepen.io/enxaneta/pen/87dc4facb04e657fea5c9a5eb7b2ea3c/
10-06 04:17