Question

我有这个HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Translate test</title>
<body>

<style>
    html,
    body {
        height: 100%;
    }
</style>

<svg style="width: 100%; height: 100%">
    <g transform="translate(100, 100)">
        <foreignObject width="200"
                       height="200">
            <div xmlns="http://www.w3.org/1999/xhtml"
                 style="height: 100%; background: pink; transform: translate3d(0, 0, 0);">
            </div>
        </foreignObject>
    </g>
</svg>

</body>
</html>

将translate3d应用于内部div使其忽略其父<g>的翻译值并将其置于左上角。另一方面，用translate3d替换translate(0, 0)会产生更预期的结果（不会移动它）。 Firefox表现得更加可预测，并且在两种情况下都将div显示为（100,100）。

问题是：哪种行为正确（以及为什么）？

一个额外的问题：如何在上面的例子中创建翻译堆栈？我在我的应用程序中使用的真正html是由一些第三方库组合生成的，这些翻译值是动态的。

谷歌浏览器：CSS在SVG里面的foreignObject内部翻译

0 个答案: