Question

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

在Safari中显示，this fiddle显示了我的问题;在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>

将容器收缩到svg高度

0 个答案: