我有一个任务,用户必须单击嵌入在 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>