Question

当div的高度大于foreignObject的高度时，foreignObject内的div将移出foreignObject。我无法正确定位div。任何人都有解决方案或遇到相同的问题？

这种情况仅发生在Macbook的显示屏上，但如果将浏览器放在双显示器显示屏上，则可以正常工作。

我正在使用google chrome版本70.0.3538.77（正式版本）（64位）。我还使用了苹果Macbook Pro 15英寸版本10.13.3 macOS highsierra。

Image - Macbook default monitor Image - Macbook using Dell's monitor

svg {
   border: 1px solid black;
}          
foreignObject {
   border: 1px solid blue;
   transform: translate(50px, 50px);
}
div {
   border: 1px solid red;
   height: 100px;
   overflow: scroll;
}

<svg height='500px' width='500px'>
      <foreignObject height='100px' width='100px'>
         <div  xmlns="http://www.w3.org/1999/xhtml">
            Bacon ipsum dolor amet ball tip burgdoggen t-bone pastrami, ground
         </div>
      </foreignObject>
</svg>

当Chrome中的文本溢出时，SVG中的foreignObject无法正确定位

0 个答案: