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>