css - 将容器缩小到 svg 高度

Question

我有一个任务，用户必须单击嵌入在 svg 中的固定纵横比图像（比较可点击的图像映射）。单击右侧区域可激活链接。不知何故，我总是得到一个 100% 的窗口高度 svg，隐藏反馈文本。

在 Safari 中显示，这个小提琴显示了我的问题；在 Firefox 中，事情按预期工作。在左侧，您会看到作业（“一些文本”表示“单击圆圈”）或跨越右侧 svg 高度的说明性图像。

滚动条应该不可见，并且反馈（“更多文本”）应该出现在窗口中，因为还有足够的空间：

.w50{width:50%}
.w30{width:30%}

<div class="w50">
    <image /> <!-- image height is 500 px -->
    <p> image with assignment</p>
</div>
<div class="w30 left">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0  341 455" preserveAspectRatio="xMinYMin">
    <image width="341" height="455" xlink:href="" />
    <a xlink:href="?cell1" id="a3776">
        <path d="m 127.72277,283.21783 a 9.9009905,11.386139 0 1 1 -19.80198,0 9.9009905,11.386139 0 1 1 19.80198,0 z" id="path2984" style="opacity:0.23275865;fill:#74d600;fill-opacity:0.22222224;stroke:#000000;stroke-opacity:1" />
    </a><!-- etc -->
  </svg>
</div>
<div class="w30"> <!--height is 400 px -->
    <p>feedback text</p>
</div>