如何在具有 PNG 图像背景的响应式 svg 图像映射中控制高度

Question

我在 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>

...以及之后的其他地区。

图像映射现在以当我调整 window 大小时的方式响应，无论我是否调整 window 大小时可点击区域都是正确的。但是我无法控制例如图片贴图的高度。

Answer 1

您可以将高度设置为视口高度的 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>

或者对 .map 执行相同操作并将 SVG 的高度设置为 100%：

.map {
  height: 100vh;
}
svg {
  height: 100%;
}

如何在具有 PNG 图像背景的响应式 svg 图像映射中控制高度

How to control height in responsive svg image map with PNG image background

svg

imagemap