Css 将容器收缩到svg高度

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

在Safari中显示，显示我的问题；在Firefox中，一切正常。 在左侧，您可以看到赋值“some text”的意思是“单击圆圈”，或者是一幅跨越右侧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>