包含foreignObject的可滚动SVG中的错误

Bugs in scrollable SVG containing foreignObject

本文关键字：错误 SVG foreignObject 包含 滚动      更新时间：2023-09-26

我创建了一个SVG，它使用这里的滚动条滚动：

http://www.dotuscomus.com/svg/lib/library.html#innerscroll_full

在SVG中，我有一个交互式foreignObject，它本质上是一个包含HTML表单的iframe。滚动操作很好，但当滚动SVG时，表单的鼠标位置似乎没有刷新；也就是说，表单看起来是滚动的，但您必须单击元素所在的位置，而不是所处的位置。我该如何解决这个问题？

编辑（清晰度）：这种情况发生在Chrome（最新版本）中；它在Firefox中运行良好（IE不相关，因为无论如何都不支持foreignObject）。

SVG中的相关代码：

<foreignObject x="0" y="0" width="700" height="550" id="samp01">
    <iframe xmlns="http://www.w3.org/1999/xhtml" src="question-samp01.html" seamless="seamless" style="overflow:hidden;padding:0;margin:0;border:0;" width="700" height="550">  </iframe>
</foreignObject>

（相关）HTML:

<div class="question-wrapper multiple-choice" id="samp01">
    <form class="tutor" name="samp01" onsubmit="return check($('#samp01'));">
        <p class="question">The universal gas constant is approximately 0.0821 L atm mol<sup>-1</sup> K<sup>-1</sup>. How many significant figures are given here?</p>
        <ol class="multiple-choice">
            <li>
                <label for="samp01"><input type="radio" name="samp01" value="A">  3</label>
            </li>
            <li>
                <label for="samp01"><input type="radio" name="samp01" value="B">  4</label>
            </li>
            <li>
                <label for="samp01"><input type="radio" name="samp01" value="C">  5</label>
            </li>
        </ol>
        <input type="submit" value="Check" class="submit">  
    </form>
</div>

第二版：这似乎与谷歌Chrome中显示翻译的外国对象的错误有关。如果我只是手动翻译foreignObject元素（如中所示，我只是在源代码中添加transform="translate（50）"），它会显示相同的错误。

显然这是Webkit中的一个错误，但强制浏览器重新绘制SVG可能会有所帮助。

尝试在上面添加一个随机类，或者附加一个空节点，或者在文档中添加一个空的style元素。

相关文章：