我想在不同國家/地區創建帶有可點擊按鈕的地圖。我已經在https://codepen.io/DigitalDesigner/pen/vYpXvZb上設定了一個測驗我已經嘗試過絕對定位，但這會導致鏈接移出所需的位置。
當視窗擴展和收縮時，如何使鏈接保持在原位？
.europe-map {
}
.map-container {
width:100%;
height:604px;
}
@media screen and (min-width:768px) {
.map-container {
height:727px;
}
}
.map {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/66/Blank_map_of_Europe_cropped.svg);
background-size: 100%;
background-repeat: no-repeat;
background-position: left top;
height:100%;
}
.links {
}
.link {
}<section class="europe-map">
<div class="map-container">
<div class="map">
<div class="links">
<a class="link" href="#" style="position:absolute;left:10%;top:20%;">Test</a>
</div>
</div>
</div>
</section>uj5u.com熱心網友回復：
一種解決方案——也許是最可靠的——是將地圖和鏈接合并到它們自己的 SVG 中。
.map-container {
width: 100%;
height: 604px;
}
@media screen and (min-width:768px) {
.map-container {
height: 727px;
}
}
.link {
font-size: 10px;
text-decoration: underline;
fill: blue;
}<section class="europe-map">
<div class="map-container">
<svg viewBox="0 0 593 606" class="map">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/6/66/Blank_map_of_Europe_cropped.svg"/>
<a class="link" xlink:href="#"> <text x="10%" y="14%">Test</text> </a>
</svg>
</div>
</section>uj5u.com熱心網友回復：
絕對位置是相對于最近的定位元素。在這種情況下，您可以消除links元素或調整其大小以匹配地圖，然后在鏈接元素的父元素上設定相對定位。
請注意，我已使用填充將地圖元素的高度設定為影像的縱橫比 (593/606)，并且我將鏈接向上和向左移動其大小的 50% 以使它們在該位置居中。后者解決了由于鏈接大小相對于影像大小而導致的明顯移動。
.map {
position: relative;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/66/Blank_map_of_Europe_cropped.svg);
background-size: 100%;
background-repeat: no-repeat;
background-position: left top;
padding-bottom: 97.85%; /* image width / height */
}
.link {
position: absolute;
transform: translate(-50%, -50%); /* center the element on the position */
text-decoration: none;
font-family: Arial, sans-serif;
color: maroon;
}<section class="europe-map">
<div class="map-container">
<div class="map">
<a class="link" href="#" style="left:11.4%; top:13.5%;">Iceland</a>
</div>
</div>
</section>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/446731.html
標籤：javascript html css svg