为什么SVG中的foreignObject在Chrome正常显示但在Firefox不显示？

问题核心原因 #

你遇到的Chrome正常、Firefox不显示foreignObject内容的问题，是三个Firefox遵循标准更严格、容错性更低的特性导致的：

1. SVG标签大小写敏感：你代码中全小写的<foreignobject>不符合SVG规范，规范要求为驼峰写法<foreignObject>，Chrome兼容了小写写法，但Firefox直接将小写标签判定为无效元素忽略。
2. 内嵌HTML命名空间缺失：foreignObject内部嵌入的HTML内容需要明确声明XHTML命名空间，Firefox需要该标识判定内容类型后才会渲染，Chrome省略了该校验步骤。
3. SVG元素CSS 3D变换支持缺陷：你通过JS给<g>标签设置的CSS 3D旋转属性，Firefox对SVG元素的CSS 3D变换支持度不足，容易导致内部foreignObject内容被裁剪不渲染。

修复方案 #

按以下步骤修改即可兼容Firefox：

• 将所有代码中的<foreignobject>开闭标签统一替换为驼峰写法<foreignObject>
• 给每个foreignObject内部的div增加XHTML命名空间属性，示例如下：

<foreignObject width="135" height="95" transform="translate(445,30)" >
    <div xmlns="http://www.w3.org/1999/xhtml">
        TESTer TEXT super long bunch of info hello how are you this should not fit
    </div>
</foreignObject>

• 给轮播的两个<g>元素增加CSS属性，修复3D变换导致的渲染问题：

#cube1_E, #cube2_E {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

如果修改后仍有异常，可以把JS中设置CSS transform的逻辑，改为直接修改SVG元素原生的transform属性，兼容性更好。

内容的提问来源于stack exchange，提问作者SGP