0

我原始问题的简化形式。给定下面的代码（对于 Chrome/Safari），如何在不知道外部 div 转换矩阵中的值的情况下使内部 div 中的“文本”出现在左上角？

<body>
  <div style="-webkit-transform: matrix(1, 0, 0, 1, 100, 50);">
    <div style='background-color: #f00; -webkit-transform: none; left: 0px; top: 0px; position: fixed'>text</div>
  </div>
</body>

无论我在 CSS 方面尝试什么，我都不能让内部 div 忽略外部 transform()。从规范看来 -webkit-transform: none 应该清除转换堆栈和/或 position: fixed; 但没有什么对我有用。我已经在 Firefox ('transform') 中尝试过相关代码，但存在同样的问题。

原始公式：我正在尝试使用D3JS 绘制一个 SVG 容器，该容器设置为 google.maps.OverlayView 并直接定位在我的 google 地图容器顶部，两者均为 600x400 固定位置在左上角。您可以在此处查看 gist 中的代码。

这工作正常，直到您拖动地图，此时它正在重新定位我的 SVG 容器，显然是由于父 div 之一中的 -webkit-transform: matrix(...) ：如果我在 Chrome DevTools 中关闭该行，我的叠加视图回到了正确的位置。我需要覆盖视图与地图视口保持对齐，因为我在地图移动时刷新内容。

4

0 回答 0