滚动在 chrome 中的 svg 异物内部不起作用

Posted 2023-03-05

【中文标题】滚动在 chrome 中的 svg 异物内部不起作用

【英文标题】：scroll is not working inside svg foreign object in chrome

【发布时间】：2016-03-16 08:35:49

【问题描述】：

我在 svg 外来对象中有 div，带有溢出：自动

滚动只能使用鼠标滚轮，不能拖动条 它适用于 Firefox，但不适用于 chrome/safari 如果没有对 svg-g 元素进行转换，它可以工作

见小提琴：http://jsfiddle.net/ranr/ncry8Lmx/

这是 chrome 中的错误吗？有什么办法吗？

<svg  >
  <g transform="translate(100,50)">
    <rect x="4" y="4"   stroke="#666666" fill="#eeeeee" />
    <foreignObject x="10" y="10"  >
      <div xmlns="http://www.w3.org/1999/xhtml" style="height:100%;overflow:auto;">
        <div>aaaaaa</div>
        <div>bbbbbb</div>
        <div>cccccc</div>
        <div>dddddd</div>
        <div>eeeeee</div>
        <div>ffffff</div>
      </div>
    </foreignObject>
    <g>
</svg>

【问题讨论】：

还报告了有关铬的项目code.google.com/p/chromium/issues/detail?id=568614

【参考方案1】：

我认为这是 Chrome/Safari 的错误。如果您尝试将 overflow:auto 更改为 overflow:scroll，则 div 会显示在 foreignObject 之外。

【参考方案2】：

那个铬臭虫已经关闭，不幸的是，它看起来更糟。如果您打开 jsfiddle，则该 div 内容是不可见的，除非您删除 overflow:auto 样式。我测试了，如果overflow-y:scroll还是不可见的。在 Chrome v62 中测试。 Firefox 57 运行良好。