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

时间:2018-06-15 19:04:00

标签: css google-chrome

我有这个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是由一些第三方库组合生成的,这些翻译值是动态的。

0 个答案:

没有答案