Question

请保存我的理智！

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" id="sake" stroke-opacity="0.3" style="width: 100%; height: 100%;">

<g id="1" class="squaregroup" transform="translate(300, 20)">
        <g id="square_main_1" class="square_main" transform="translate(250, 50)">
                <foreignObject class="" id="fo_1" style="width: 500px; height:500px;">
                        <div id="globe" style="width:100%; height:100%" ></div>
                </foreignObject>
        </g>
</g>
</svg>

一个工作简化的jsfiddle https://jsfiddle.net/n6erd5dq/6/

画布工作（尽管地球只是右下角的几个像素）并绘制了正确的ThreeJS世界，但它永远不会在父DIV中渲染。

如果你检查了身体元素，你可以看到DIV被正确翻译了一下。

我已经尝试了很多位置，绝对，最大宽度，div清晰，更改层次等选项，我知道的每一个技巧。从我看来，canvas应该尊重一个尊重转换/翻译的foreignObject。

我也无法找到任何其他问题，所以我想知道我做错了什么，其他人都没有遇到过这个问题？

我知道另一种方法是为整个屏幕安装一个画布，然后为每个小图像设置多个视口（？），但考虑到项目的其余部分，我试图远离这个。例如https://threejs.org/examples/webgl_multiple_elements.html

非常感谢安迪

画布不用变换在g里面渲染

0 个答案: