2

我创建了一个 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>

编辑 2：这似乎与 Google Chrome 中关于显示翻译的外语对象的错误有关。如果我只是手动翻译 foreignObject 元素（例如，我只是将 transform="translate(50)" 添加到源代码中），它会显示相同的错误。

4

1 回答 1

0

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

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

于 2013-07-10T22:59:16.423 回答