我在 PNG 之上有一個 SVG 影像映射。我已將影像映射包含在 DIV 中，但請注意影像映射不關心 DIV 的高度。無論我如何設定封閉 DIV 的樣式，影像映射似乎都會忽略它并溢位。這是地圖。
https://asle.benoni.no/static/maptest/
如果我嘗試更改 PNG 影像的寬度和高度，它就會消失。我想將此影像調整為例如 100% 的高度，以便它適合 DIV 容器。所以我只能控制封閉 DIV 的寬度，但不能控制高度。如何控制高度？
這是我正在使用的代碼：
<div class="map">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1052 1314" preserveAspectRatio="none">
<image width="100%" height="100%" xlink:href="rutenr.png"></image><a xlink:href="http://ostfoldbotanikk.org/obfnet/ruter/links/PM1020.html">
<rect x="327" y="144" fill="#fff" opacity="0.2" width="58" height="58"></rect>
</a><a xlink:href="http://ostfoldbotanikk.org/obfnet/ruter/links/PM1520.html">
<rect x="384" y="143" fill="#fff" opacity="0.2" width="58" height="58"></rect>
</a><a xlink:href="http://ostfoldbotanikk.org/obfnet/ruter/links/PM3025.html">
<rect x="555" y="89" fill="#fff" opacity="0.2" width="58" height="58"></rect>
...以及之后的其他區域。
影像映射現在的回應方式是，當我調整視窗大小時，無論我是否調整視窗大小，可點擊區域都是正確的。但我無法控制例如影像映射的高度。
uj5u.com熱心網友回復：
您可以將高度設定為視口高度的 100%。
svg {
height: 100vh;
}<div class="map">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1052 1314" preserveAspectRatio="none">
<image width="100%" height="100%" xlink:href="https://asle.benoni.no/static/maptest/rutenr.png"></image><a xlink:href="http://ostfoldbotanikk.org/obfnet/ruter/links/PM1020.html">
<rect x="327" y="144" fill="#fff" opacity="0.2" width="58" height="58"></rect>
</a><a xlink:href="http://ostfoldbotanikk.org/obfnet/ruter/links/PM1520.html">
<rect x="384" y="143" fill="#fff" opacity="0.2" width="58" height="58"></rect>
</a><a xlink:href="http://ostfoldbotanikk.org/obfnet/ruter/links/PM3025.html">
<rect x="555" y="89" fill="#fff" opacity="0.2" width="58" height="58"></rect>
</svg>
</div>或者對 SVG 執行相同操作.map并將 SVG 的高度設定為 100%：
.map {
height: 100vh;
}
svg {
height: 100%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/444236.html