滚动在chrome中的svg外部对象内部不起作用

Question

我在svg外部对象中有div,溢出:auto

• 滚动只用鼠标滚轮,不能拖动吧
• 它适用于Firefox,但不适用于chrome/safari
• 如果没有对svg-g元素进行转换,它就有效

看小提琴:http://jsfiddle.net/ranr/ncry8Lmx/

这是铬的错误吗？任何方式呢？

<svg width="1000" height="800">
  <g transform="translate(100,50)">
    <rect x="4" y="4" width="110" height="90" stroke="#666666" fill="#eeeeee" />
    <foreignObject x="10" y="10" width="100" height="80">
      <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>

Answer 1

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